前后端交互中常用到的三种过滤器以及前端的路由导航守卫

一、前端的请求拦截器

1、配置：在前端项目main.js文件中进行配置

//axios 请求拦截  每发送一次http请求，都会执行此拦截器
axios.interceptors.request.use(config => {
	//为请求头对象添加Token验证的token字段
	config.headers.adminToken = window.sessionStorage.getItem('adminToken');
	return config;
})

2、作用：在前端向后端发送的每一次请求都要经过这个拦截器，可以在此对请求做一些公共的操作，比如在此处就是对每一条请求的请求头中都写入adminToken这个令牌

二、后端的过滤器

1、配置：在后端项目中的web.xml文件中进行配置

  <!--  配置验证token的过滤器  -->
    <filter>
        <filter-name>adminTokenFilter</filter-name>
        <filter-class>com.ffyc.webBack.filter.AdminTokenFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>adminTokenFilter</filter-name>
        <url-pattern>/back/*</url-pattern>
    </filter-mapping>

2、作用：对前端过来的所有请求先进行一个公共的处理，如果符合条件，则程序继续跳转到下一个过滤器或者servlet程序，如果不符合条件，则后端会向前端作出一个响应 

3、特殊：此处的过滤器是一个token验证过滤器，因为只需要除登录请求外的其它请求进入过滤器，所以在此处对于访问此过滤器的映射地址进行了一个调整，在前面添加了一个标志级“/back”,从而可以实现多个具有相同请求进入对应过滤器的需要，避免了多次配置映射地址所带来的复杂操作

三、前端的响应拦截器

1、配置：在前端项目main.js文件中进行配置

// 添加响应拦截器
axios.interceptors.response.use((resp) => { //正常响应拦截
	if (resp.data.code == 500) {
		ElementUI.Message({
			message: resp.data.message,
			type: "error"
		})
	}
	if (resp.data.code== 401) {
		router.replace("/login");
	}
	return resp;
});

2、作用：对从后端的响应回来的数据进行一个公共的处理，比如后端向前端响应回来的状态码有401（token验证失败，需要用户重新进行登录）,500(系统繁忙)，200（验证通过），在这里可以将对每一个响应中的401状态码和500状态码在前端做一个统一的处理，这样就避免了多个请求在处理响应时编写相同代码所带来的代码冗余问题 

四、路由导航守卫

1、配置：在前端的项目的router目录下的index.js文件中进行配置

// to-将要访问的页面地址,from-从哪个页面访问的,next-放行函数
//路由导航守卫，每次发生路由跳转时，就会自动的执行此逻辑
rout.beforeEach((to, from, next) => {
	console.log(to.path)
	if (to.path == '/login') { //如果用户访问的登录页，直接放行
		return next();
	} else {
		var account= window.sessionStorage.getItem("account");//从浏览器中取出用户信息
		if (account == null) {//没有登录
			return next("/login");
		} else {//已经登录
			next();
		}
	}
})

2、作用：存放在每一次进行路由跳转时都会执行的一段代码，比如在登录案例中，用户在登录后再想要进行每一项操作都要先判断用户是否已经登录，那么实现这个逻辑判断的代码就可以放在路由导航守卫里面