【vue-element-admin】 登录流程代码解析备忘

-1 背景

新工作内容是运维与开发公司自研的大数据平台，自研的平台是基于datax-web改造而来。去GitHub查询repo得知datax-web的前端datax-web-ui项目是由vue-element-admin 改造的。这里记录下代码方便自己学习。

0 前言

这一篇先写vue-element-admin 登录流程，vue-element-admin 使用的是UI toolkit是element-ui，官方文档点击此处。

下面是原作者的编写思路，掘金原帖

进入正题，做后台项目区别于做其它的项目，权限验证与安全性是非常重要的，可以说是一个后台项目一开始就必须考虑和搭建的基础核心功能。我们所要做到的是：不同的权限对应着不同的路由，同时侧边栏也需根据不同的权限，异步生成。这里先简单说一下，我实现登录和权限验证的思路。

登录：当用户填写完账号和密码后向服务端验证是否正确，验证通过之后，服务端会返回一个token，拿到token之后（我会将这个token存贮到cookie中，保证刷新页面后能记住用户登录状态），前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息（如用户权限，用户名等等信息）。
权限验证：通过token获取用户对应的 role，动态根据用户的 role 算出其对应有权限的路由，通过 router.addRoutes 动态挂载这些路由。

上述所有的数据和操作都是通过vuex全局管理控制的。(补充说明：刷新页面后 vuex的内容也会丢失，所以需要重复上述的那些操作)接下来，我们一起手摸手一步一步实现这个系统。

1 登录流程

1.1 src/views/login/index.vue

前端登录界面view是src/views/login/index.vue，handleLogin是核心方法，该方法就做了两件事情：发送登录请求和进行路由跳转

watch: {
  $route: {
    handler: function(route) {
      const query = route.query
      if (query) {
        this.redirect = query.redirect
        this.otherQuery = this.getOtherQuery(query)
      }
    },
    immediate: true
  }
},
methods: {
	handleLogin() {
	  this.$refs.loginForm.validate(valid => {
	    if (valid) {
	      this.loading = true
	      //发送登录请求
	      this.$store.dispatch('user/login', this.loginForm)
	        .then(() => {
	        //进行路由跳转(需要考虑重定向)
	          this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
	          this.loading = false
	        })
	        .catch(() => {
	          this.loading = false
	        })
	    } else {
	      console.log('error submit!!')
	      return false
	    }
	  })
	},
	 getOtherQuery(query) {
	 	//	枚举所有键名，reduce将所有非redirect的内容存到累加器acc，最后返回累加器
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    }
}

• validate 是 element form的 method
• this.$store.dispatch('user/login', this.loginForm) 调用的是 src/store/modules/user.js 里的login action，this.loginForm是form参数
• this.$router.push({ path: this.redirect || '/', query: this.otherQuery }) this.redirect 是重定向的路径，如果没有就跳转到/路径，登录的参数是this.otherQuery。this.redirect 和 this.otherQuery 是由watch监听的，
  • watch进行监听，$route是当前路由对象，handler是回调函数，该函数描述了监听到路由变化后要做的事。
  • query对象中redirect字段存着重定向的路径（http://ip:port/#/login?redirect=%2Fdatax%2Fdependency%2FdependencyInfo redirect=后面就是this.redirect的值
  • this.getOtherQuery(query)方法会获取route.query中非redirect的其他查询条件

1.2.1 src/store/modules/user.js

这个方法的目的是发送promise请求给后端，根据username和password换token，将token存在vuex和cookie中

import { login, logout, getInfo } from '@/api/user'
const actions = {
  // user login
  login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password }).then(response => {
      // vuex存储返回的data(token)
        const { data } = response
        commit('SET_TOKEN', data.token)
        //token还会存到Cookie中
        setToken(data.token)
        //promise 将pending态改为resolve态
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },
}

• promise 发送的login方法的地址在@/api/user,打开该文件可以发现url: '/vue-element-admin/user/login'

1.2.2 src/api/user.js

这个文件就是1.2.1 promise发送的真正后端api地址，这边导入的request实际上就是自行封装的axios模块，里面配置了request前置拦截器和响应拦截器

import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/vue-element-admin/user/login',
    method: 'post',
    data
  })
}

1.2.3 src/utils/request.js

请求前置拦截器 作用是，每次发请求前检查vuex里是否有token，有的话把token配置进请求头中，统一配置方便管理。带上token是后续所有请求后端都需要token验证身份。

// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent

    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      config.headers['X-Token'] = getToken()
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

response interceptor，主要是对自定义响应码的处理

 response => {
    const res = response.data

    // if the custom code is not 20000, it is judged as an error.
    if (res.code !== 20000) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })

      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // to re-login
        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
          confirmButtonText: 'Re-Login',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },

1.3.1 src/permission.js

下面开始介绍路由部分，路由部分和请求一样，也有前后拦截器，这里是router.beforeEach和router.afterEach。当然配置了路由白名单

beforeEach：根据是否存在token判断，没token就重定向到login页面；有token的情况下，主要工作是根据用户的角色权限进行动态路由挂载。动态路由挂载会导致不同角色的用户进入系统的侧边栏内容不一样。

和登录一样，发送的请求先找vuex的模块下对应文件，例如获取对应角色的路由就是去src/store/modules/permission.js。
user/getInfo 这个请求比较简单，就是抓下vuex里有没有token，根据token抓当前用户的信息。

afterEach:beforeeach每次会启动一个虚假的进度条组件nprogress，aftereach里关闭掉

const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist

router.beforeEach(async(to, from, next) => {
  // start progress bar
  NProgress.start()

  // set page title
  document.title = getPageTitle(to.meta.title)

  // determine whether the user has logged in
  const hasToken = getToken()

  if (hasToken) {
    if (to.path === '/login') {
      // if is logged in, redirect to the home page
      next({ path: '/' })
      NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
    } else {
      // determine whether the user has obtained his permission roles through getInfo
      const hasRoles = store.getters.roles && store.getters.roles.length > 0
      if (hasRoles) {
        next()
      } else {
        try {
          // get user info
          // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
          const { roles } = await store.dispatch('user/getInfo')

          // generate accessible routes map based on roles
          const accessRoutes = await store.dispatch('permission/generateRoutes', roles)

          // dynamically add accessible routes
          router.addRoutes(accessRoutes)

          // hack method to ensure that addRoutes is complete
          // set the replace: true, so the navigation will not leave a history record
          next({ ...to, replace: true })
        } catch (error) {
          // remove token and go to login page to re-login
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error')
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }
      }
    }
  } else {
    /* has no token*/

    if (whiteList.indexOf(to.path) !== -1) {
      // in the free login whitelist, go directly
      next()
    } else {
      // other pages that do not have permission to access are redirected to the login page.
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})

router.afterEach(() => {
  // finish progress bar
  NProgress.done()
})

• beforeeach 整个是个async/await异步方法，await右边的方法一般都是promise对象
• next({ …to, replace: true })：next()是放行，next（参数）中断当前导航，执行新的导航，next({ …to, replace: true })解决死循环白屏问题

1.3.2 src/store/modules/permission.js

这个js文件主要工作·就是根据用户的角色获得对应的路由菜单。
vue-element-admin的侧边栏菜单和路由是映射在一起的，再动态挂载路由。你只需要修改路由文件src/router/index.js 和用户角色 和本文件的挂载逻辑就可以根据用户角色动态挂载~

export function filterAsyncRoutes(routes, roles) {
  const res = []

  routes.forEach(route => {
    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
    state.routes = constantRoutes.concat(routes)
  }
}

const actions = {
  generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
      let accessedRoutes
      if (roles.includes('admin')) {
        accessedRoutes = asyncRoutes || []
      } else {
        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
      }
      commit('SET_ROUTES', accessedRoutes)
      resolve(accessedRoutes)
    })
  }
}

• generateRoutes 是核心方法，根据角色是否是admin进行asyncRoutes的过滤，asyncRoutes是动态路由。动态路由和静态路由配置文件src/router/index.js
• filterAsyncRoutes 根据角色过滤路由的递归方法，因为菜单下面有些存在children也需要判断

2 回顾

路由挂载后，就会真正进行路由的跳转。根据重定向的结果跳转重定向页面or首页，流程结束。
核心文件其实就是

• 登录就（黄底色是自定义逻辑修改）
  • index.vue（前端发送表单参数）
  • @/store/modules/user.js（具体方法逻辑）
  • @/utils/request 全局请求拦截，主要是response自定义响应码操作
  • @/api/user url请求地址
• 路由就修改
  • @/permission.js 全局路由拦截
  • @/store/modules/permission.js 具体动态路由挂载策略
  • @/router/index.js 配置静态和动态路由表

动态路由挂载

前端登录

login.vue

发送请求

路由跳转

发送请求过程

全局请求拦截

vuex的login方法

路由跳转过程

全局路由拦截

进行重新定向或跳转

2 知识点

• axios、ajax、promise和async/await
  • XMLHttpRequest(xhr)：浏览器提供的js对象，用于请求服务器资源
  • jquery的ajax：基于xhr对象进行了封装的库
  • promise：es6提出的解决异步编程的一种方案，通过链式调用来解决ajax的回调地狱
  • axios：基于promise的http 库（Axios is a popular promise-based HTTP client ）
  • async/await：es8提出的解决异步操作的方案。是promise的语法糖。
  • 需要强调：promise只是异步操作的接口规范，ajax则是一种具体异步操作方法