一、登录流程分析

登录流程图：
在这里插入图片描述

1.首先,点击登录按钮，触发handleLogin方法，通过this.$store.dispatch(“user/login”, this.loginForm)调用vuex中login方法，此处user/login表示的是调用user文件下的login方法；

2.追踪到user文件下的login方法，开始登录，在login方法中commit mutation中的SET_TOKEN,把后端返回的sessionId作为参数传入。接下来看下mutation的SET_TOKEN；

3.追踪到mutation下的SET_TOKEN,把传入的sessionId保存到state；

4.登录成功后，跳转到首页。

备注：点击登录按钮后，触发handleLogin方法，利用validate进行表单验证，如果验证通过，调用user/login方法传递表单里的数据，根据.then回调执行this.$router.push方法，这个方法用于跟踪：我是从哪里跳到/login页面的，登录后我就返回哪里。

二、路由和权限校验

路由逻辑图：
在这里插入图片描述

登录成功后，跳转到首页，路由跳转需要通过路由守卫判断是否登录，逻辑为

检查是否有token

1.1若有，则判断跳转的路由是否是登录页面
1.1.1若是，直接放行
1.1.2若不是，判断vuex里是否保存了当前账号的角色
1.1.2.1若有，直接放行
1.1.2.2若没有，则分别调用getUserInfo()、getInfo()、generateRoutes分别获取当前账号的用户信息，角色信息，菜单数据等，并存入vuex
1.2若没有，强制跳转到登录页面

三、路由场景分析

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

已获取 Token：

访问 /login：重定向到 /
访问 /login?redirect=/xxx：重定向到 /xxx
访问/login 以外的路由：直接访问 /xxx

未获取 Token：

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

四、路由守卫实现

第一步，main.js 中加载了全局路由守卫

import './permission' // 路由守卫 权限控制

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

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

  if (hasToken) {
    
    
    if (to.path === '/login') {
    
    
      // 如果当前路径为 login 则直接重定向至首页即/dashboard
      next({
    
     path: '/' }) // 再次触发 beforeEach，to.path===/dashboard，执行下面的else
      NProgress.done()
    } else {
    
    
      // 判断用户的角色是否存在
      const hasRoles = store.getters.roles && store.getters.roles.length > 0
      if (hasRoles) {
    
     // 如果用户角色存在，则直接访问
        next()
      } else {
    
     // 第一次登陆，角色是不存在的，必须执行下面获取角色
        try {
    
    
          // 异步获取用户的角色
          // 角色是一个对象中的数组，如:
          // 'xxtoken': { roles: ['admin','editor']}
          // 所以通过 { roles } 获取角色
          const {
    
     roles } = await store.dispatch('user/getInfo')

          // 根据用户角色，动态生成路由
          const accessRoutes = await store.dispatch('permission/generateRoutes', roles)

          // 调用 router.addRoutes 动态添加路由，把不符合条件的路由清除，最后和原来的路由合并形成新的路由表
          router.addRoutes(accessRoutes)

          // 使用 replace 访问路由，不会在 history 中留下记录，
          // 这样回退不会回到 login 页面
          next({
    
     ...to, replace: true })
        } catch (error) {
    
    
          // 错误处理
          // 清除 Token 数据，回到登录页重新登录
          await store.dispatch('user/resetToken')
          Message.error(error || '出错啦')
          next(`/login?redirect=${
      
      to.path}`)
          NProgress.done()
        }
      }
    }
  } else {
    
    
    // 没有token的情况
    if (whiteList.indexOf(to.path) !== -1) {
    
     // 如果访问的 URL 在白名单中，则直接访问
      next()
    } else {
    
    
      // 如果访问的 URL 不在白名单中，则直接重定向到登录页面，并将访问的 URL 添加到 redirect 参数中
      next(`/login?redirect=${
      
      to.path}`)
      NProgress.done()
    }
  }
})

router.afterEach(() => {
    
    
  // 设置进度条动画完成
  NProgress.done()
})

五、动态路由

动态路由流程图：
在这里插入图片描述

六、动态路由实现

代码示例：

import {
    
     asyncRoutes, constantRoutes } from '@/router'

/**
 * 使用 meta.roles 判断当前角色是否有权限
 * @param roles
 * @param route
 */
function hasPermission(roles, route) {
    
    
  if (route.meta && route.meta.roles) {
    
    
    return roles.some(role => route.meta.roles.includes(role)) // 用户的角色和路由中获取的角色是否匹配
  } else {
    
    
    // 没有设置权限，则具有所有权限
    return true
  }
}

/**
 * 递归过滤异步路由表
 * @param routes asyncRoutes
 * @param roles
 */
export function filterAsyncRoutes(routes, roles) {
    
    
  const res = []

  routes.forEach(route => {
    
    
    // 对路由进行浅拷贝，注意 children 不会拷贝，因为不需要对 children 进行判断，所以可以使用浅拷贝
    const tmp = {
    
     ...route }
    if (hasPermission(roles, tmp)) {
    
     // 有权限后才会判断子路由
      if (tmp.children) {
    
    
        tmp.children = filterAsyncRoutes(tmp.children, roles)
      }
      res.push(tmp)
    }
  })

  return res
}

const state = {
    
    
  routes: [],
  addRoutes: []
}

const mutations = {
    
    
  SET_ROUTES: (state, routes) => {
    
    
    state.addRoutes = routes // addRoutes 用来保存 routes
    state.routes = constantRoutes.concat(routes) // 侧边栏菜单根据此 routes 生成
  }
}

const actions = {
    
    
  generateRoutes({
     
      commit }, roles) {
    
    
    return new Promise(resolve => {
    
    
      let accessedRoutes
      // 如果角色中包含 admin，则直接跳过判断，直接将 asyncRoutes 全部返回
      if (roles.includes('admin')) {
    
    
        accessedRoutes = asyncRoutes || []
      } else {
    
    
        // 如果角色中没有包含 admin，则调用 filterAsyncRoutes 过滤路由
        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
      }
      // 将路由保存到 vuex 中
      commit('SET_ROUTES', accessedRoutes)
      resolve(accessedRoutes)
    })
  }
}

export default {
    
    
  namespaced: true,
  state,
  mutations,
  actions
}

七、总结

关于路由处理

vue-element-admin 对所有访问的路由进行拦截；
访问路由时会从 Cookie 中获取 Token，判断 Token 是否存在：
- 如果 Token 存在，将根据用户角色生成动态路由，然后访问路由，生成对应的页面组件。这里有一个特例，即用户访问 /login 时会重定向至/ 路由；
- 如果 Token 不存在，则会判断路由是否在白名单中，如果在白名单中将直接访问，否则说明该路由需要登录才能访问，此时会将路由生成一个 redirect 参数传入 login 组件，实际访问的路由为：/login?redirect=/xxx

关于动态路由和权限校验

vue-element-admin 将路由分为：constantRoutes 和 asyncRoutes
用户登录系统时，会动态生成路由，其中 constantRoutes 必然包含，asyncRoutes 会进行过滤；
asyncRoutes 过滤的逻辑是看路由下是否包含meta 和 meta.roles 属性，如果没有该属性，所以这是一个通用路由，不需要进行权限校验；如果包含 roles 属性则会判断用户的角色是否命中路由中的任意一个权限，如果命中，则将路由保存下来，如果未命中，则直接将该路由舍弃；
asyncRoutes 处理完毕后，会和 constantRoutes 合并为一个新的路由对象，并保存到 vuex 的 permission/routes 中；
用户登录系统后，侧边栏会从 vuex 中获取 state.permission.routes，根据该路由动态渲染用户菜单。

总结二：

Login/index.vue点击登陆提交user/login的actions。
user/login进行登陆验证，登陆成功之后保存token到vuex和cookie中。
回到Login/index.vue跳转路由，这时就到了permission.js
permission.js进行判断是否登陆，是否有用户信息？没有用户信息就获取用户信息，并且保存到vuex，然后根据用户信息中的roles生成可访问路由，并通过addRoutes进行添加。

登录权限管理

文章目录