Vue + Axios 实现路由拦截和登录拦截

一、路由拦截

• 在项目中，有些页面往往需要登录后才可以浏览，有些页面则不需要，那么我们就可以通过路由拦截进行处理。

• 首先，需要对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 钩子（全局前置守卫），如上。

其中有三个参数，

1. to: Route: 即将要进入的目标 路由对象
2. from: Route: 当前导航正要离开的路由
3. 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('/');   // 正常登录
  }

• 本文作者： Gladysdrea
• 本文链接： https://gladysdrea.github.io/blogs/2018/12/26/Vue系列/Vue+Axios实现路由拦截和登录拦截/
• 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！