登录退出模块的实现
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(() => {})