No.9 vue-element-admin 学习使用（四）登录成功后，userinfo获取，根据权限生成路由

这是我参与8月更文挑战的第9天，活动详情查看：8月更文挑战

用户登录成功之后，需要展示页面了，但是不同的用户权限是不一样的，可以看到的左侧侧边栏，可以直接通过url访问的页面，都需要知道当前登录用户的权限，才可以进行限制。

为了实现这个功能，我们会在全局钩子router.beforeEach中拦截路由，判断是否已获得token，在获得token之后我们就要去获取用户的基本信息了

在用户成功登录后，在src/permission.js文件中的全局钩子router.beforeEach中拦截路由， 定义一个whiteList，不需要auth就可以访问，['/login', '/auth-redirect']，否则无法进入login页面，无限死循环。

const hasToken = getToken()，获取token，如果然后下面就是一系列判断逻辑。 如果没有token，在白名单内，则直接next，不在白名单内，则跳转回登录页面。 如果有token，如果目标页面是登录页面，则直接跳转到根目录下，否则要根据用户权限，判断是否可以跳转到该页面。 如果已经获取过用户信息，

const hasRoles = store.getters.roles && store.getters.roles.length > 0

则直接next，否则需要获取用户信息。

const { roles } = await store.dispatch('user/getInfo')

调用vuex里的getInfo，请求getInfo接口，获取用户的roles，name，avatar，introduction 并且commit修改vuex中的这些属性。

return new Promise((resolve, reject) => {
    getInfo(state.token).then(response => {
    const { data } = response
    if (!data) {
      reject('Verification failed, please Login again.')
    }
    const { roles, name, avatar, introduction } = data
    if (!roles || roles.length <= 0) {
      reject('getInfo: roles must be a non-null array!')
    }
    commit('SET_ROLES', roles)

然后成功取到用户的路由权限，调用vuex的generateRoutes方法

const accessRoutes = await store.dispatch('permission/generateRoutes', roles)

在vuex中计算出用户的权限，commit提交SET_ROUTES

commit('SET_ROUTES', accessedRoutes)

在SET_ROUTES中，为constantRoutes拼接上权限内的routes，

import { asyncRoutes, constantRoutes } from '@/router'
state.routes = constantRoutes.concat(routes)

然后beforeEach中,添加这些路由，用户即可在左侧边栏看到这些路由，并且可以直接通过url访问这些路由了。然后next，跳转页面。

router.addRoutes(accessRoutes)

最后在afterEach全局钩子中结束进度条。

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

至此，用户的权限获取成功，可以访问自己权限内的路由，接下来学习各个插件的使用。