对于部分网站来说，首先呈现的就是登录页面，所以登录页面的功能实现非常重要
思想：
- 对于不同页面内容的实现,我们需要通过router来实现，首先我们得定义我们所需要的路由，例如/login，/404, / 等
- 定义了相关路由，我们得让我们刚访问地址的时候根据不同的条件展示是否为登录页。所以我们需要设置路由守卫，我们这里以token来判断。
- 如果我们登录过并且登录成功，我们在发送请求成功后，后端会将一个token返回给我们，我们会将这个token存储到vuex中，同时也存储到浏览器的cookie中。
- 我们会根据是否存在token值来进行路由守卫，首先判断的是否有token，如果没有token的话,判断我们要访问的地址是否为/login，/404等我们规定白名单里的地址，如果是就next(),否则就next(‘/login’);如果有token的话，判断我们访问的是否为/login，如果是就next(‘/’)等主页，如果不是/login，就判断登录token所指定的用户是否有存在，没有的话通过vuex中actions中方法调用接口获取，有的话就直接next()
路由守卫
import router from '@/router' import store from '@/store' import nprogress from 'nprogress' // 引入进度条 import 'nprogress/nprogress.css' const whiteList = ['/login', '/404'] // 前置守卫 router.beforeEach(async(to, from, next) => { nprogress.start() if (store.getters.token) { if (to.path === '/login') { next('/') } else { if (!store.getters.userId) { const { roles } = await store.dispatch('user/getUserInfo') // 筛选用户的可用路由 const routes = await store.dispatch('permission/filterRoutes', roles.menus) // 筛选的到当前用户可用的动态路由 // routes时刷选得到的路由 // addRoutes router.addRoutes([...routes, { path: '*', redirect: '/404', hidden: true }]) // 添加动态路由到路由表 // 添加完动态路由后 next(to.path) // 相当于跳到对应的地址 相当于多做一次跳转 } else { next() } } } else { if (whiteList.indexOf(to.path) > -1) { next() } else { next('/login') } } nprogress.done() }) // 后置守卫 router.afterEach(() => { nprogress.done() })
axios中拦截器
import store from '@/store' import axios from 'axios' import { Message } from 'element-ui' import { getTimeStamp } from '@/utils/auth' import router from '@/router' const TimeOut = 3600 // 定义token超时时间 const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 5000 // 设置超时时间 }) // 请求拦截器 // 需要进行请求判断，因为很对请求都需要基于用户已经登录进行操作 service.interceptors.request.use(config => { // config 是请求的配置信息 // 注入token if (store.getters.token) { if (IsCheckTimeOut()) { store.dispatch('user/logout') router.push('/login') return Promise.reject(new Error('token超时了')) } // 请求头中注入token config.headers['Authorization'] = `Bearer ${store.getters.token}` } return config }, error => { return Promise.reject(error) }) // 响应拦截器 service.interceptors.response.use(response => { const { success, message, data } = response.data if (success) { return data } else { Message.error(message) // 提示错误消息 return Promise.reject(new Error(message)) } }, error => { if (error.response && error.response.data && error.response.data.cod === 10002) { store.dispatch('user/logout') router.push('/login') } else { Message.error(error.message) // 提示错误信息 } return Promise.reject(error) }) function IsCheckTimeOut() { var currentTime = Date.now() var timeStamp = getTimeStamp() return (currentTime - timeStamp) / 1000 > TimeOut } export default service
