vue实现路由权限

2022-03-08 07:21:05 浏览数 (2)

业务场景

在vue中我们经常需要对不同角色实现不同的路由权限

如管理员可以看见所有路由页面,普通员工只能看到部分和自己业务相关的路由

这个时候我们需要对不同角色分配不同的路由权限

实现步骤
router.js中按变量分配不同路由
代码语言:javascript复制
// 公共路由
export const constantRoutes = []
// sidebarRoutes管理员路由
export const sidebarRoutes_admin = []
// sidebarRoutes代理路由
export const sidebarRoutes_agent = []
生成路由方法
代码语言:javascript复制
actions: {
    // 生成路由
    GenerateRoutes({
      commit
    }) {
      return new Promise(resolve => {
        getLevelId().then(res => {
          setLevel(res.data.level_id)
          if (getLevel() == 1 || getLevel() == 2) {
            const rewriteRoutes = sidebarRoutes_admin
            rewriteRoutes.push({
              path: '*',
              redirect: '/404',
              hidden: true
            })
            commit('SET_ROUTES', rewriteRoutes)
            commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes_admin))
            commit('SET_DEFAULT_ROUTES', sidebarRoutes_admin)
            commit('SET_TOPBAR_ROUTES', sidebarRoutes_admin)
            resolve(rewriteRoutes)
          }
          if(getLevel() == 3){
              const rewriteRoutes = sidebarRoutes_agent
              rewriteRoutes.push({
                path: '*',
                redirect: '/404',
                hidden: true
              })
              commit('SET_ROUTES', rewriteRoutes)
              commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes_agent))
              commit('SET_DEFAULT_ROUTES', sidebarRoutes_agent)
              commit('SET_TOPBAR_ROUTES', sidebarRoutes_agent)
              resolve(rewriteRoutes)
          }
          if(getLevel() == 4){
              const rewriteRoutes = [];
              rewriteRoutes.push({
                path: '*',
                redirect: '/404',
                hidden: true
              })
              commit('SET_ROUTES', rewriteRoutes)
              commit('SET_SIDEBAR_ROUTERS', constantRoutes)
              // commit('SET_DEFAULT_ROUTES', sidebarRoutes_agent)
              // commit('SET_TOPBAR_ROUTES', sidebarRoutes_agent)
              resolve(rewriteRoutes)
          }
          resolve()
        });
      })
    }

0 人点赞