vue拦截

1.axios拦截器

axios.interceptors.request.use(
    config => {
        if (stoken) {  // 判断是否存在token，如果存在的话，则每个http header都加上token
            config.headers.Authorization = `token ${store.state.token}`;
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    });

// http response 拦截器
axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        if (error.response) {
            switch (error.response.status) {
                case 401:
                    // 返回 401 清除token信息并跳转到登录页面
                    
                    router.replace({
                        path: 'login',
                        query: {redirect: router.currentRoute.fullPath}
                    })
            }
        }
        return Promise.reject(error.response.data)   // 返回接口返回的错误信息
    });

2.导航守卫
路由拦截

在定义路由的时候就需要多添加一个自定义字段requireAuth，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由，否则就进入登录页面。
const routes = [
{
path: ‘/’,
name: ‘/’,
component: Index
},
{
path: ‘/repository’,
name: ‘repository’,
meta: {
requireAuth: true, // 添加该字段，表示进入这个路由是需要登录的
},
component: Repository
},
{
path: ‘/login’,
name: ‘login’,
component: Login
}
];

定义完路由后，我们主要是利用vue-router提供的钩子函数beforeEach()对路由进行判断

router.beforeEach((to, from, next) => {
    if (to.meta.requireAuth) {  // 判断该路由是否需要登录权限
        if (token) {  // 判断当前的token是否存在
            next();
        }
        else {
            next({
               path: '/login',
               query: {redirect: to.fullPath} //将跳转的路由path作为参数，登录成功后跳转到该路由
            })
        }
    }
    else {
        next();
    }
})