对于部分网站来说,首先呈现的就是登录页面,所以登录页面的功能实现非常重要
思想:
- 对于不同页面内容的实现,我们需要通过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