【vue】如何搭建拦截器和设置路由守卫（基于token认证）

项目开发的时候没有使用已有的框架，自己搭建了一个，所以拦截器和路由守卫也要自己搭建

步骤

第一步：在src根目录下新建http.js文件，设置请求拦截器和路由守卫

http.js文件内容

import axios from 'axios';
import router from './router';
import {setCookie,getCookie} from "@/cookie.js"
import store from './store'

// axios 配置
axios.defaults.timeout = 8000;
axios.defaults.baseURL = global.BASE_URL;


// http request 拦截器
axios.interceptors.request.use(
  config => {
    if(config.url =="http://192.168.22.52:8081/auth-web/access/login"){
      return config;
    }else{
      if (store.state.Authorization) { //判断token是否存在
        config.headers.Authorization =getCookie();  //将token设置成请求头
      }
      return config;
    }
    
  },
  err => {
    return Promise.reject(err);
  }
);

// http response 拦截器
axios.interceptors.response.use(
  response => {
    if (response.data.errno === 999) {
      router.replace('/');
      console.log("token过期");
    }
    return response;
  },
  error => {
    return Promise.reject(error);
  }
);

/**
 * 请求失败后的错误统一处理
 * @param {Number} status 请求失败的状态码
 */
const errorHandle = (status, other) => {
  // 状态码判断
  switch (status) {
      // 401: 未登录状态，跳转登录页
      case 401:
          toLogin();
          break;
      // 404请求不存在
      case 404:
          message.error('请求的资源不存在',5);
          break;
      default:
          console.log(other);
  }};



// //路由守卫
router.beforeEach((to, from, next)  => {
  if(from.name == "Login"){ // 如果不需要权限校验，直接进入路由界面
    next();
  }else if(to.meta.requireAuth){
    // 判断该路由是否需要登录权限
    if (store.state.Authorization) {  // 获取当前的token是否存在
      console.log("token存在");
      next();
    } else {
      console.log("token不存在");
      next({
        path: '/login', // 将跳转的路由path作为参数，登录成功后跳转到该路由
        query: {redirect: to.fullPath}
      })
    }
  }else { // 如果不需要权限校验，直接进入路由界面
    next();
  }
});

export default axios;

第二步：在src根目录下新建store文件夹和Index.js文件

首先安装vuex

npm install vuex --save

Index.js文件内容

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
//  const a=123;
const store = new Vuex.Store({
 
  state: {
    // 存储token
    Authorization: localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : ''
  },
 
  mutations: {
    // 修改token，并将token存入localStorage
    changeLogin (state, user) {
      state.Authorization = user.Authorization;
      localStorage.setItem('Authorization', user.Authorization);
    }
  }
});
 
export default store;

第三步：在src根目录下新建cookie.js文件

function setCookie(token){
    document.cookie = token;
}
function getCookie(){
    return document.cookie;
}
export{setCookie,getCookie}

第四步：在main.js中引入store和http.js

//增加拦截器
import http from './http';  //此处问http文件的路径
Vue.prototype.$http = http;
//引入store
import store from './store'

new Vue({
  el: '#app',
  store,//增加store
  router,
  components: { App },
  template: ''
})

第五步：在组件中使用

登陆中在缓存储存token

            setCookie(res.data.data.token); // 将获取的token存入cookie.js
            localStorage.setItem("Authorization", res.data.data.token);
            store.state.Authorization=res.data.data.token;