一、路由拦截
在项目中，有些页面往往需要登录后才可以浏览，有些页面则不需要，那么我们就可以通过路由拦截进行处理。
首先，需要对router进行修改，如下：
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const router = new Router({
{
path: '/home',
name: 'Home',
component: () => import('@/view/pc/homePage/index'),
meta: {
requireAuth: true // 在需要登录权限的页面添加该字段
}
},
})
export default router;
继续--
router.beforeEach((to, from, next) => {
if (to.matched.some(res => res.meta.requireAuth)) { // 判断是否需要登录权限，如上，将需要登录权限的页面设置meta
(可以在用户登录后存储一个session或cookie，设置cookie有限期和后台的有限期一致，个人存的是cookie，在这里用session代替一下)
if (sessionStorage.getItem('username')) { // 判断是否登录
next()
} else { // 如果没有登录跳转登录页面
next({
path: '/login',
query: {redirect: to.fullPath}
})
}
} else {
next()
}
})
vue-router提供了导航钩子，我们可以用router.beforeEach来注册一个全局的before 钩子（全局前置守卫），如上。
其中有三个参数，
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
详情请参考Vue Router文档，这里不做过多解释。
二、请求拦截
我们可以单独建一个http的js文件，然后引入到main.js中
import Axiosfrom 'axios';
Axios.defaults.withCredentials = true;
// response拦截
Axios.interceptors.response.use(response => {
return response;
}, error => {
if(error.response){
switch (error.response.status) {
case 401:
router.replace({
path: '/',
query: {redirect: router.currentRoute.fullPath}
});
break;
}
}
return Promise.reject(error);
})
一般情况下，登录之后会让其跳转到首页，但是当用户登录过期重新登录后，为了更友好，会希望跳转到刚刚浏览的页面，这样可以在登录的时候进行处理（个人见解，如果多余，敬请更正）
if (this.$route.query.redirect) {
this.$router.push(this.$route.query.redirect); // 登录过期重新登录
} else {
this.$router.push('/'); // 正常登录
}
注：GitHub地址：Gladysdrea
