未登录拦截token验证全局前置路由守卫axios请求拦截器axios响应器

前文

记录一下项目中防止用户未登录可以进入系统进行操作，常用于pc后台管理项目，移动端小程序可以进入软件但是想要操作时需要登录，这里用到两个知识点分别是 vue-Router的全局路由守卫和axios请求拦截器、请求响应器。

vue-router全局前置路由守卫

前置路由守卫作用：防止用于未登录对系统操作，或者让无权限的用户进行用户
思路：一般用户在登录的时候都会有自己的token，我们去判断token是否存在是否正确，如果有token且正确就正常登录，没有token就让用户去注册账号获取去登录页面登录
实现代码如下：
这里的代码是写在项目中的路由文件一般都是 router文件夹下的inde.js

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
//上面的代码都是项目自带的，我们需要写的代码就放在这个后面
router.beforeEach((to,from,next)=>{
   //这里的to 就是要去哪里 相当于 this.$Router.push()
   //from表示从哪个页面来  next 表示下一步去执行什么操作
   //这里用道德token是后端提供的 我们在登录页登录的时候获取到token存放到本地缓存里
   // 或者存放在vuex中都可以看自己的需要，放在vuex中需要考虑页面刷新vuex中的数据消失的问题
   const token=localStorage.getItem('token');
    // path: '/login',
   //   name: 'Login',
   //   component:'../../src/login/login.vue' 这个是页面的路径
   //这个name就是路由中的name属性
   if(to.name!=='Login' && !token){
       //如果要跳转的页面不是登录页面 并且没有token就直接跳转登录页
       next({name:'Login'})
   }else{
      next()
   }
})
export default router

以上就是全局前置路由守卫写在router文件下的index.js

axios请求拦截器请求响应器

作用：用户未登录对系统进行操作

思路：1.我们需要用户进行登录验证自己信息，但是怕有人修改token还需要验证token需要把token发给后端去验证，然后根据后端返回的数据进行判断用户拥有的权限和正确性。
2.但是我们前端请求千万个我们不能每次请求都单独加一个token属性那太麻烦。我们在需要保护的页面的路由设置中加一个meta:{}属性，这个里面自己随便写自己定义一个自己喜欢的喜欢的变量。
3.给我们想保护所有的页面都加上meta:{},
4.然后我们发送请求的时候把meta中我们定义的属性加载header请求头里，这里主要看后端怎么写的，绝大部门都是加载请求头里携带给后端，我们这里只对前端做演示。

步骤：1.给要保护的页面路由加上 meta:{Authorization:true};
2.进行axios拦截的时候把上面的加载请求头里
3.对请求成功或者失败进行处理也就是请求响应器

这里的文件基本是定义在自己写封装的axios里

import router from "@/router";
import axios from "axios";
import { Promise } from "core-js";
// import { config } from 'vue/types/umd'
const baseURL = "http://localhost:3000"; //一个开发地址
const localURL = ""; //一个上线地址
const request = axios.create({
  baseURL: baseURL,
  timeout: 5000,
});
//请求拦截器
request.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem("token");
    //如果本地储存有token就把token加给请求头
    if (token) config.headers.Authorization = `Bearer${token}`;
    //如果没有token直接return
    return config;
  },
  (error) => Promise.reject(error)
);
// 响应拦截器 收到请求以后进行统一的处理
request.interceptors.response.use((response)=>{
    //这是成功做的事情,请求成功说明有token什么也不用做就可以
    //直接简写 response=>response es6箭头函数简写
    return response
},
(error)=>{
    //如果请求失败了 就说明没有token我们就需要让使用者去登陆跳转到登录页
    // const {response}=error;
    // const {status}=response 可以进行解构
    //这个地方因为是请求失败的所以后台会给一个反馈 data下面有一个message可以进行弹窗提醒
    // 可以用element的组件 Message.error(error.data.message)
    // 可以自己打印这个错误看看里面都有什么
    // console.dir(error)
    if(error.response.status===401){
        //这个地方的router就是配置路由页面的router文件夹下面的 index.js
        router.push({name:'Login'})
    }
}
)
export default request;

这就是一般我们发送请求后端给返回的一些信息

总结

全局路由守卫更适合用在pc端，axios请求拦截器适合用在移动端小程序之类的，一般项目中两个都写双重保险