Vue中使用路由和权限校验映射

最新推荐文章于 2023-03-03 18:07:36 发布

鸭绒

最新推荐文章于 2023-03-03 18:07:36 发布

阅读量1.4k

点赞数 3

分类专栏： vue 源码学习文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_43334673/article/details/109681747

版权

本文介绍了在Vue项目中如何处理路由和权限映射，包括已获取和未获取Token时的路由逻辑，以及动态路由的生成和权限检查方法。在Vue-element-admin框架中，所有路由都会被拦截，根据Token是否存在生成动态路由，并通过用户角色决定是否显示特定页面。动态路由生成和权限校验涉及constantRoutes和asyncRoutes，通过meta.roles属性进行权限匹配。

摘要由CSDN通过智能技术生成

思考：你现在参与的项目中是如何处理路由和权限映射的？

什么时候用到权限校验呢？比如一个网站有多个页面，但页面的展示与功能是有角色区分的，有些功能仅展示给管理员使用，有些是供用户使用，这就需要使用路由和权限映射实现。

路由处理逻辑如下：

在这里插入图片描述

路由场景分析

中后台路由常见的常见如下：

已获取 Token：
访问 /login：重定向到 /
访问 /login?redirect=/xxx：重定向到 /xxx
访问 /login 以外的路由：直接访问 /xxx
未获取 Token：
访问 /login：直接访问 /login
访问 /login 以外的路由：如访问 /dashboard，实际访问路径为 /login?redirect=%2Fdashboard，登录后会直接重定向 /dashboard

路由逻辑源码
第一步，main.js 中导入permission.js：

import './permission' // permission control

第二步，permission 定义了全局路由守卫

router.beforeEach(async(to, from, next) => {
   
  // 启动进度条
  NProgress.start()

  // 修改页面标题
  document.title = getPageTitle(to.meta.title)

  // 从 Cookie 获取 Token
  const hasToken = getToken()

  // 判断 Token 是否存在
  if (hasToken) {
   
    // 如果当前路径为 login 则直接重定向至首页
    if (to.path === '/login') {
   
      next({
    path: '/' })
      NProgress.done()
    } else {
   
      // 判断用户的角色是否存在
      const hasRoles = store.getters.roles &&</