前文
记录一下项目中防止用户未登录可以进入系统进行操作，常用于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请求拦截器适合用在移动端小程序之类的，一般项目中两个都写双重保险