VUE 动态路由_vue怎么实现动态路由

VUE 动态路由_vue怎么实现动态路由因公司业务的发展,需要做一款新的产品,该产品分为:用户端和后台管理。我负责后台管理系统的开发。在看了UI的设计图后,又因为产品的周期较短,所以,我果断采用了vue-element-admin来快速的搭建后台管理系统。这里我主要说下在这个过程中用到的动态路由,简单的总结下。vue-element-

大家好,欢迎来到IT知识分享网。

  因公司业务的发展,需要做一款新的产品,该产品分为:用户端和后台管理。我负责后台管理系统的开发。在看了UI的设计图后,又因为产品的周期较短,所以,我果断采用了vue-element-admin 来快速的搭建后台管理系统。这里我主要说下在这个过程中用到的动态路由,简单的总结下。

vue-element-admin 本身的动态路由 (个人的理解)

  • 登录成功后获取token,根据 token 来获取用户信息和权限

    const { roles } = await store.dispatch('user/getInfo')
    // generate accessible routes map based on roles
    const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
    
  • 事先把不需要权限都能访问的路由 和 需要权限访问的路由都分配好后,在permission文件中导入

    import { asyncRoutes, constantRoutes } from '@/router'
    
  • 再调用 action 里的 generateRoutes 方法来根据用户的权限对路由进行不同的处理,并存储在state中

    generateRoutes({ commit }, roles) {
      return new Promise(resolve => {
        let accessedRoutes
        if (roles.includes('admin')) {
          accessedRoutes = asyncRoutes || []
        } else {
          accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
        }
        commit('SET_ROUTES', accessedRoutes)
        resolve(accessedRoutes)
      })
    }
    
    export function filterAsyncRoutes(routes, roles) {
      const res = []
    
      routes.forEach(route => {
        const tmp = { ...route }
        if (hasPermission(roles, tmp)) {
          if (tmp.children) {
            tmp.children = filterAsyncRoutes(tmp.children, roles)
          }
          res.push(tmp)
        }
      })
    
      return res
    }
    
    function hasPermission(roles, route) {
      if (route.meta && route.meta.roles) {
        return roles.some(role => {
          return route.meta.roles.includes(role)
        })
      } else {
        return true
      }
    }
    
  • 将生成的路由通过addRoutes动态添加进去

    router.addRoutes(accessRoutes)
    
  • 将state中的路由通过getters暴露出去,并生成侧边栏

    permission_routes: state => state.permission.routes,
    
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        :default-active="activeMenu"
        :collapse="isCollapse"
        :background-color="variables.menuBg"
        :text-color="variables.menuText"
        :unique-opened="false"
        :active-text-color="variables.menuActiveText"
        :collapse-transition="false"
        mode="vertical"
      >
        <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
      </el-menu>
    </el-scrollbar>
    

    我自己在此基础上改动的动态路由

      因为上述的动态是动态获取用户的权限来生成对应的路由的,登录成功后生成的路由不会在切换页面时发生改变。这和我们交互需求不符合,而且我们后端的登录接口,是一下将用户的token和用户的信息都返回了,并且没有用户的权限,也就是说我们的用户所有页面都是可以访问的。

    我的思路

    • 我将所有的路由都分配成了可访问的同步路由,没有异步路由

    • 并将所有的页面 (除登录、404页面),都在meta中添加了roles,并根据需求为每个页面添加对应的权限属性值。

    • permission 中定义了一个变量来表示路由状态,并定义对应的修改方法,最后将变量暴露出去,并将状态存储到了 sessionStorage 中

      routerstatus: sessionStorage.getItem('ifrouter') || false
      
    • 在渲染侧边栏的时候监听该值的变化,定义 setTimeout 的原因是当该值发生变化后,发现侧边栏不动态改变,而试了this.$forceUpdate()没有用,就采用这个方法

      watch: {
        routerstatus(newv, oldv) {
          if (newv) {
            this.ifRouter(this.transferarr)
          } else {
            this.ifRouter(this.outsidearr)
          }
          sessionStorage.setItem('ifrouter', newv)
          this.isshow = false
          const timer = setTimeout(() => {
            this.isshow = true
            clearTimeout(timer)
          }, 500)
        }
      },
      <!-- 这里的代码和我上述的思路有一定的出入,后续优化掉,更新掉 -->
      ifRouter(routerarr) {
        const temp_route_arr = this.$router.options.routes
        for (let i = 0; i < temp_route_arr.length; i++) {
          if (temp_route_arr[i].children && routerarr.includes(temp_route_arr[i].children[0].name)) {
            temp_route_arr[i].hidden = false
          }
          if (temp_route_arr[i].children && !routerarr.includes(temp_route_arr[i].children[0].name)) {
            temp_route_arr[i].hidden = true
          }
        }
      }
      <!-- 这里是稍作优化后的代码,随后有优化,会及时的更新 -->
      ifRouter(control) {
        const temp_route_arr = this.$router.options.routes
        for (let i = 0; i < temp_route_arr.length; i++) {
          if (temp_route_arr[i].meta && temp_route_arr[i].meta.roles.includes(control)) {
            temp_route_arr[i].hidden = false
          } else {
            temp_route_arr[i].hidden = true
          }
        }
      }
      
    • 这样通过动态的改变某个页面路由的 hidden 属性,来显示或隐藏页面,可以实现在切换页面时来动态改变侧边栏

  有想法的欢迎留言,一起学习成长

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/28130.html

(0)
上一篇 2023-09-28 17:00
下一篇 2023-10-10 10:15

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信