vue实现路由权限

原创

用户6493868

发布于 2022-03-08 07:21:05

7340

发布于 2022-03-08 07:21:05

文章被收录于专栏：vue封装H5

业务场景

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

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

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

实现步骤

router.js中按变量分配不同路由

// 公共路由
export const constantRoutes = []
// sidebarRoutes管理员路由
export const sidebarRoutes_admin = []
// sidebarRoutes代理路由
export const sidebarRoutes_agent = []

生成路由方法

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()
        });
      })
    }

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

router