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 钩子（全局前置守卫），如上。

其中有三个参数，

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('/');   // 正常登录

}