vue项目中前端判断用户登陆状态以及验权

登陆退出模块的实现

1.用户登陆，后台会返给前端一个惟一的标识符token或者jssessionid（本文以session为例，token也大体相同），前端将获得的标识符存储在cookies中，而且将路由跳转到首页；

2.用户访问，用户访问任何页面时在全局的钩子函数中取用户登陆标识，存在才会继续路由跳转，不存在的话将路由定向到登陆页面，此时全部的请求应当携带登陆标识符，后台用来判断登陆权限；

3.登陆失效，后台通常会设置用户登陆失效的，一段时间内用户不进行操做session会过时，此时用户再次访问后台接口时后台应做出响应，返回一个过时的code码，前端拦截code码，清除cookies并将路由定向到登陆页面；

4.用户退出，退出时清空cookies，路由定向到登陆页面,避免路由bug也能够刷新页面。

import router from './router'
import store from './store'
import { Message } from 'element-ui'
import { getToken } from '@/utils/auth'
const whiteList = ['/login', '/download'] // 不重定向白名单
router.beforeEach((to, from, next) => {
  if (getToken()) {
    if (to.path === '/login') {
      next({ path: '/' })
    } else {
      if (store.getters.menu.length === 0) {
        store.dispatch('GetUserInfo').then(res => { // 拉取用户信息
          next()
        }).catch(() => {
          Message.error('验证失败,请从新登陆')
          store.dispatch('LogOut').then(() => {
            next({ path: '/login' })
            location.reload()
          })
        })
      } else {
        next()
      }
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next('/login')
      NProgress.done()
    }
  }
})
router.afterEach(() => {})
复制代码