vue 实现路由拦截（前置守卫）

本地存储必须要有token才能进入某个页面（比如购物车页面），否则会被拦截。

请求服务器数据的request.js部分代码：

// 请求拦截(interceptors: 中文为拦截器)
instance.interceptors.request.use(config=>{
    let token=localStorage.getItem('token')
    if(token){
        config.headers.token=token; //请求头名称由接口文档提供
    }
    return config;
}, err=>{
    return Promise.reject(err)
})

// 响应拦截
instance.interceptors.response.use(res=>{
    return res.data;
}, err=>{
    return Promise.reject(err)
})

路由js部分代码

//路由拦截
router.beforeEach((to, from, next) => {
  //去购物车页面必须有token
  let token = localStorage.getItem("token");
  if (to.path == "/cart") { //跳转到购物车页面
    if (token) {
      next();
    } else {
      Vue.prototype.$toast("请先登录");//$toast是vantui框架里的组件
      setTimeout(() => {
        next("/user"); //下一个页面是用户登录页面
      }, 2000);
    }
    return;
  }
  //这个next适配所有路由
  next();
});