Vue的全局路由守卫与拦截器配置

Vue的全局路由守卫可以在每次发送axios请求时，判断用户是否有授权认证，如果没有则将引导用户前往登录或注册页面

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import Vant, { Toast } from "vant";
import "vant/lib/index.css";
import axios from "axios";
Vue.use(Vant);
Vue.config.productionTip = false;
Vue.prototype.$axios = axios;
// 使用axios默认基准路径
axios.defaults.baseURL = "http://127.0.0.1:3000";

// 添加全局路由守卫
router.beforeEach((to, from, next) => {
  // 如果是去个人中心页，要确认本地存储是否有token
  if (to.path === "/personal") {
    if (localStorage.getItem("token")) {
      return next();
    } else {
    //没有token就去往登录页
      return router.push({
        path: "/login",
      });
    }
  }
  // 放行。这里一定要有next()否则无法进行下一步操作
  next();
});
// 添加全局拦截器
axios.interceptors.response.use((res) => {
  // 全局路由守卫只判断是否有token，而不能判断token的真实性
  // console.log(res.data);
  // 我们可以判断服务器返回的数据。{}解析数据
  const { statusCode, message } = res.data;
  //使用正则对服务器返回的数据进行判断
  const errRegExp = /^4\d{2}$/;
  if (errRegExp.test(statusCode)) {
  //Toast是vant里面的一个轻提示弹框
    Toast.fail(message);
  }
  if (message === "用户信息验证失败") {
    // 验证有误，退回登录，清除token，不清除下次还是这个token
    localStorage.removeItem("token");
    localStorage.removeItem("userId");
    router.replace({
      path: "/login",
    });
  }
  // 不管拦截的数据如何，最后一定要return 数据，不会数据就卡在axios了
  return res;
});
new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

基本配置就是这样了，有任何问题欢迎留言交流！

请允许自己写出垃圾，否则，你连垃圾都写不出来。