关于vue的路由权限

//主要靠路由守卫,中结合addRoute方法动态的添加一个新的路由列表
//pageRouterList为前端的所有权限列表
import Vue from 'vue'
import Router from 'vue-router'
import { constantRouterMap, asyncRouterMap } from '@/config/router.config'
import pageRouterList from './routers'
// hack router push callback
const originalPush = Router.prototype.push
Router.prototype.push = function push (location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch((err) => err)
}

Vue.use(Router)
const router = new Router({
  mode: 'hash',
  routes: constantRouterMap.concat(asyncRouterMap)
})
var flag = false
// 挂载路由导航守卫,to表示将要访问的路径,from表示从哪里来,next是下一个要做的操作 next('/login')强制跳转login
router.beforeEach((to, from, next) => {
  // 访问登录页,放行
  if (to.path === '/login') return next()
  // 获取token
  const token = window.sessionStorage.getItem('token')
  // 没有token, 强制跳转到登录页
  if (!token) return next('/login')
  //flag判断页面刷新,hasPeimiss判断是否从登录页面来的
  if (!flag || JSON.parse(sessionStorage.getItem('hasPermiss')) === true) {
    //   路由权限判断
    flag = true
    const menuList = pageRouterList
    console.log(JSON.parse(sessionStorage.getItem('menuList')))
    const netMenuList = JSON.parse(sessionStorage.getItem('menuList'))
    if (netMenuList === null && netMenuList === undefined && netMenuList.length === 0) {
      menuList[0].hidden = false
      menuList[0].children[0].hidden = false
    } else {
      // 路由权限校验
      netMenuList.forEach((e, index) => {
        menuList.forEach((m, n) => {
          // 第一层判断 菜单目录
          if (e.funcType === 'DIR' && e.path === m.path) {
            m.hidden = false
            if (e.children.length > 0) {
              // 第二层判断菜单页面
              e.children.forEach((g, k) => {
                m.children.forEach((l, p) => {
                  if (g.funcType === 'TAB' && g.path === l.path) {
                    l.hidden = false
                    if (g.children.length > 0) {
                      g.children.forEach((q, w) => {
                        //   第三层判断按钮权限
                        if (q.funcType === 'BTN') {
                          l.meta.power.push(q.path)
                        }
                      })
                    }
                  }
                })
              })
            }
          }
        })
      })
    }
    // 生成新的路由菜单  addRoute
    router.matcher = new Router().matcher
    asyncRouterMap[0].children = menuList
    const allRouterList = constantRouterMap.concat(asyncRouterMap)
    allRouterList.forEach((r) => {
      router.addRoute(r)
    })
    // const myRoutes = router.getRoutes()
    // console.log(myRoutes)
    next({ ...to, replace: true })
  } else {
    next()
  }
})
export default router

### Vue.js 路由权限控制实现方案 在 Vue.js 中,路由权限控制是一个重要的功能,尤其是在开发后台管理系统或其他需要用户角色区分的应用程序时。以下是关于如何通过 `vue-router` 和第三方插件来实现路由权限控制的具体方法。 #### 1. 基于自定义逻辑的简单权限控制 可以通过在路由守卫中手动验证用户的访问权限来实现简单的权限控制。例如,在全局前置守卫 (`beforeEach`) 中拦截未授权的请求并重定向到登录页: ```javascript import Vue from 'vue'; import Router from 'vue-router'; Vue.use(Router); const routes = [ { path: '/admin', name: 'AdminDashboard', component: AdminComponent, meta: { requiresAuth: true, role: ['admin'] } }, { path: '/user', name: 'UserProfile', component: UserComponent, meta: { requiresAuth: true, role: ['user', 'admin'] } } ]; const router = new Router({ mode: 'history', routes }); router.beforeEach((to, from, next) => { const isAuthenticated = !!localStorage.getItem('token'); const requiredRoles = to.meta.role; if (to.matched.some(record => record.meta.requiresAuth)) { if (!isAuthenticated) { next('/login'); // 如果未认证,则跳转至登录页面 return; } if (requiredRoles && !requiredRoles.includes(getUserRole())) { next('/unauthorized'); // 如果无权访问此路径,则跳转至未经授权页面 return; } } next(); }); function getUserRole() { try { const tokenPayload = JSON.parse(atob(localStorage.getItem('token').split('.')[1])); return tokenPayload.role || null; } catch (e) { return null; } } export default router; ``` 上述代码展示了如何利用路由元信息(meta)以及全局前置守卫来进行基本的角色权限校验[^1]。 #### 2. 使用第三方插件增强权限管理 为了简化复杂的权限控制系统,可以引入专门设计的插件如 **vue-router-user-roles**。这个插件允许开发者基于用户角色保护特定路由,并支持灵活扩展以适配不同的身份验证机制[^3]。 安装插件后,只需按需配置即可快速启用高级别的安全防护措施。下面是一段示例代码片段展示其基础用法: ```bash npm install vue-router-user-roles --save ``` 接着修改原有的路由表结构如下所示: ```javascript // 导入必要的模块 import VueUserRoles from 'vue-router-user-roles'; // 初始化插件 Vue.use(VueUserRoles, { authChecker: function(user, routeMeta){ let allowedRoles = Array.isArray(routeMeta.roles)?routeMeta.roles:[]; if(!allowedRoles.length){return true;} if(user&&Array.isArray(user.roles)){ return user.roles.some(role=>allowedRoles.indexOf(role)!==-1); } return false; } }) const routes = [{ path:'/secure-area', component: SecureAreaComponent, meta:{ roles:['editor','manager'] } }]; ``` 在此基础上,任何尝试进入受保护区域的操作都会被自动检测是否满足条件。 #### 3. 动态加载异步数据完成复杂场景下的权限判断 对于某些更精细的需求来说,可能还需要动态获取服务器端返回的数据作为依据来做最终决定。此时可以在组件内部调用 API 请求最新状态后再做进一步处理: ```javascript <script> export default{ async beforeRouteEnter(to,from,next){ await fetch("/api/check-permission").then(res=>{ res.json().then(data=>{ if(data.allowed===true){ next(vm=>{}); }else{ next(false); } }) }); } } </script> ``` 以上就是几种常见的方式用来解决 Vue.js 应用内的路由权限问题[^4]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值