Element UI 中路由和权限校验的分析及实现

怼烎@ 2023-03-04 09:12 26阅读 0赞

#### 一、路由和权限校验 ####

1.  路由和权限校验，在参与的项目中是如何处理路由和权限映射的？
2.  路由处理逻辑分析，如下所示：

*  访问 `/xxx`，`router.beforeEach` 会做全局的导航守卫，从 `cookie` 中获取 `token`，判断 `token` 是否存在。
 *  如果 `token` 不存在，判断路由是否在白名单中。如果在白名单中，则访问路由 `/xxx`。如果不在白名单中，访问路由 `/login?redirect=/xxx`。
 *  如果 `token` 存在，判断路由是否为 `/login`。如果路由是 `/login`，则重定向到 `/`。如果路由不是 `/login`，获取用户的角色，动态生成路由，`replace` 模式访问路由 `/xxx`。如果出现异常情况，重置 `token`，访问路由 `/login?redirect=/xxx`。

1.  路由场景分析，中后台路由常见的，如下所示：

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

#### 二、路由和权限校验的实现 ####

1.  **permission.js** 中的全局导航守卫 **router.beforeEach**，代码如下所示：

// 定义了全局导航路由守卫
    router.beforeEach(async(to, from, next) => { 
      // 显示的进度条，启动进度条
      NProgress.start()
    
      // 修改页面标题
      document.title = getPageTitle(to.meta.title)
    
      // 从 Cookie 中获取 Token
      const hasToken = getToken()
    
      // 判断 Token 是否存在
      if (hasToken) {  // Token 存在
        // 如果当前路径为 login 则直接重定向到首页
        if (to.path === '/login') { 
          // if is logged in, redirect to the home page
          next({  path: '/' })
          NProgress.done()
        } else { 
          // 判读用户的角色是否存在
          const hasRoles = store.getters.roles && store.getters.roles.length > 0
          // 如果用户角色存在，则直接访问
          if (hasRoles) { 
            next()
          } else { 
            try { 
              // 异步获取用户的角色
              const {  roles } = await store.dispatch('user/getInfo')
    
              // 根据用户的角色，动态生成路由
              const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
    
              // 调用 router.addRoutes 动态添加路由
              router.addRoutes(accessRoutes)
    
              // 使用 replace 访问路由，不会在 history 中留下记录
              next({  ...to, replace: true })
            } catch (error) { 
              // 移除 Token 数据
              await store.dispatch('user/resetToken')
              // 显示错误提示
              Message.error(error || 'Has Error')
              // 重定向到登录页面
              next(`/login?redirect=${ to.path}`)
              NProgress.done()
            }
          }
        }
      } else {  // Token不存在
        // 如果访问的 URL 在白名单中，则直接访问
        if (whiteList.indexOf(to.path) !== -1) { 
          next()
        } else { 
          // 如果访问的 URL 不在白名单中，则直接重定向到登录页面，并将访问的 URL 添加到 redirect 中
          next(`/login?redirect=${ to.path}`)
          NProgress.done()
        }
      }
    })

1.  **permission.js**，完整代码如下所示：

import router from './router'
    import store from './store'
    import {  Message } from 'element-ui'
    import NProgress from 'nprogress' // progress bar
    import 'nprogress/nprogress.css' // progress bar style
    import {  getToken } from '@/utils/auth' // get token from cookie
    import getPageTitle from '@/utils/get-page-title'
    
    // 让显示的进度条隐藏，旋转的
    // showSpinner 可以控制右侧的环形进度条是否显示
    NProgress.configure({  showSpinner: false }) 
    
    // 白名单
    const whiteList = ['/login', '/auth-redirect'] 
    // 定义了全局导航路由守卫
    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 && store.getters.roles.length > 0
          // 如果用户角色存在，则直接访问
          if (hasRoles) { 
            next()
          } else { 
            try { 
              // 异步获取用户的角色
              const {  roles } = await store.dispatch('user/getInfo')
    
              // 根据用户的角色，动态生成路由
              const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
    
              // 调用 router.addRoutes 动态添加路由
              router.addRoutes(accessRoutes)
    
              // 使用 replace 访问路由，不会在 history 中留下记录
              next({  ...to, replace: true })
            } catch (error) { 
              // 移除 Token 数据
              await store.dispatch('user/resetToken')
              // 显示错误提示
              Message.error(error || 'Has Error')
              // 重定向到登录页面
              next(`/login?redirect=${ to.path}`)
              NProgress.done()
            }
          }
        }
      } else { 
        // 如果访问的 URL 在白名单中，则直接访问
        if (whiteList.indexOf(to.path) !== -1) { 
          next()
        } else { 
          // 如果访问的 URL 不在白名单中，则直接重定向到登录页面，并将访问的 URL 添加到 redirect 中
          next(`/login?redirect=${ to.path}`)
          NProgress.done()
        }
      }
    })
    
    router.afterEach(() => { 
      // 停止进度条
      NProgress.done()
    })