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