1、原理
原理是通过vue-router的beforeEach钩子，在每次路由到一个地址的时候先判断该路由是否携带了meta信息，且该信息中的requireAuth是否为true，如果为true表示该路由是需要身份验证的。则去localStorage找token，若token不存在则表示用户无认证，去登录请求token。若token存在则拿着token去请求。
2、token保存
文件中代码：
methods: {
handleLogin (data) {
(data).then(response => {
if (!) {
('登录失败')
}
const token =
('token', token)
= '/'
}, response => {
('登录失败')
})
}
}
3、拦截器
文件中代码：
((request, next) => {
if (('token')) {
['Authorization'] = 'zhangsan' + ('token')
}
next((response) => {
if ( === 401) {
del('token')
= '/login'
}
})
})
4、路由器
文件中代码：
import Vue from 'vue'
import VueRouter from 'vue-router'
(VueRouter)
const routes = [
{
path: '/',
component: require('./views/Home'),
meta: {
requiresAuth: true
}
},
]
const router = new VueRouter({
routes: routes
})
((to, from, next) => {
let token = ('token')
if ((item => ) && (!token || token === null)) {
next({
path: '/login',
query: { redirect: }
})
} else {
next()
}
})
export default router