Vue 常见的 路由 请求 拦截器，没有用户登录状态 不允许访问其他页面 返回到登录页

拦截器 一般有两个手段进行拦截：

1. 路由拦截：

路由跳转的时候，我们想要添加一些 权限判断 或 其他操作的时候，就要使用到Vue中 路由钩子函数。
定义：路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。

我们要用到 全局路由钩子函数： beforeEach （在跳转之前执行）

beforeEach 有三个参数：

1. to:router 即将进入的路由对象
2. from: 当前导航即将离开的路由
3. next: Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为 false，终止导航。

请求钩子的详情

打开 Vue 的 main.js ：

main.js 是我们的入口文件，主要作用是初始化vue实例并使用需要的插件，目的是为了全局共享 这个拦截器。
在 引入模块 并 创建实例的下方 和 new Vue（{ }）生成 Vue Logo 的 上面（其实 地址 无所谓啦）
写入：

// 拦截器
// 路由拦截

router.beforeEach((to, from, next)=>{
	if(to.path == '/login'){
		next();
	}else{
		if(localStorage.getItem('token')){
			next();
		}else{
		next('/login');
		}
	}
})

语法很简单 也很 low：
如果：即将进入的 路由是 login（登录）就确认
否则：{ 如果：能取到 token 值 就确认。否则：回到 login（登录页面）}

2. 请求拦截：

同样还是在 main.js 入口文件做文章：

// interceptors 就是 axios 自带的拦截器   use是函数 代表着 使用规则  config 就是一个形参
axios.interceptors.request.use(function(config){
	if(!localStorage.getItem('token')){
		router.push({
			name:'login'
		})
	}else{
		config.headers.token = localStorage.getItem('token');
		// token 有值 就通过 http 的 headers 传递到 服务端去（后台）
	}
	return config;
},function(err){
		
})
		

拦截的时候要有网络请求，指的是 http 3握4挥，所以比较麻烦。个人推荐 上一个方法 路由拦截。

可以看到 每次数据请求的时候 都会 传递这个 token

也可以在 DJango 中查看

随便创建一个文件

from django.utils.deprecation import MiddlewareMixin

class Check(MiddlewareMixin):
	def process_req(self, request):
		token = requesst.META.get("HTTP_TOKEN")
		print('token:', token)
			
	def process_res(self, request, response):
		return response

收工