vue中后台管理登录后的token管理

在做后台管理系统的时候，登录后token管理很重要。上代码，有瑕疵，有待改善，见谅。

import Vue from 'vue'
import Router from 'vue-router'
import { canTurnTo, setTitle } from '@/lib/util';//第一个是判断权限的函数
import { route } from './routes'//路由列表，路由在另一个页面写的。
import store from '../../../store/index'//获取到vuex
import { getUserInfo } from '@/request/apis/user'//获取axios写好的根据token重新获取用户信息。
Vue.use(Router)

const turnTo = (to, access, next) => {//这个是用来判断是否有权限访问当前页面，可以先跳过，在下面的路由判断里面会用到。
  if (canTurnTo(to.name, access)) {
    next() // 有权限，可访问
  } else {
    next({ replace: false, name: 'error_401' }) // 无权限，重定向到401页面
  }
}
const router = new Router({//配置路由
  mode: 'hash',
  routes: route
})


// 登录token管理与过滤，卸载vue中的全局守卫中最好不过了。
router.beforeEach((to, from, next) => {
  const token = store.state.token;//先获取到登录时在vuex里存的token
  // 开始判断，如果token存在
  if (token) {
    if (to.name === 'login') {//token已经存在还跳转的是登录页面，则跳转到首页
      next({ name: 'home' })//这里跳转到哪自己更改
    } else {//tokend存在跳转的不是登录页，则需要判断权限
      if (store.state.setHasGetInfo) {//是否获取了用户信息，这个也是在vuex里存的一个开关，登录后保存信息后保存为true.
        turnTo(to, store.state.access, next);//然后进行路由的权限判断，因为后台的权限不一样，每个人跳转的页面是可以分配的，所以后端会返回每个用户可以跳转的页面权限，登录时保存在vuex里。
      } else {//如果没有获取用户信息，则根据token重新获取用户信息保存起来，这里主要是为刷新页面准备的，因为刷新页面时vuex里的东西都会没有了.
  //但用户信息很多，不能都保存在session里来防止刷新，所以session里只保存了token,来防止刷新后token也不见了。
        getUserInfo().then(d => {//当页面刷新后然后重新请求接口，后端会根据token来重新获取到用户的信息。
          if (d.data.code === 100000) {
            turnTo(to, d.data.data.menus, next);//然后再次进行判断
            store.dispatch('setInfo', d.data.data)//重新将用户信息保存起来
          } else {
            store.dispatch('removeInfo')
            next({
              name: 'login'
            })
          }
        }).catch(err => {
          // 请求失败则删除掉所有保存的信息，并跳转回登录页面
          store.dispatch('removeInfo')
          next({
            name: 'login'
          })
        })
      }
    }
  } else {//如果没有token，就简单了，如果跳转的是登录页，则让他跳转就好了，如果跳转的是其他页面，统统跳到登录页面去。
    if (to.name === 'login') {
      next()
    } else {
      next({ name: 'login' })
    }
  }
})
//这个是配置浏览器窗口标题。
router.afterEach(to => {
  setTitle(to, router.app)
  // iView.LoadingBar.finish()
  window.scrollTo(0, 0)
})

export default router

然后下面的是上面那个判断权限的判定函数，是写在另一个页面，引入进来的。

 * @param {*} name 即将跳转的路由name
 * @param {*} access 用户权限数组，从vuex里获取到的。登录是保存的
export const canTurnTo = (name, access) => {
  if (name !== undefined) {
    var bool = access.some(item => item.url === name)//跳转的路由页面name是否在返回的用户权限里面，这里这个url是后端返回的，是前端给后端的字段，和自己的每个路由里的name值配置的一样，就可以进行判断了。
    if (bool || noaccess.indexOf(name) != -1) {//返回的权限能匹配上或者name和其他一些默认的页面（如login,home,error_401这些页面）能匹配上则返回true，否则则返回false。noaccess是上面var了一个数组，里面放了一些通用的路由的name值。
      return true
    } else {
      return false;
    }
  }else{
    return false;
  }
}

当然，其实动态路由的实现可以使用addRoutes这个api更好点。不过这里因为一些原因没使用，这个我也没用过，小伙伴可以去研究研究，有大佬会的不要吝啬哦。感谢