axios响应拦截器 路由导航守卫

axios响应拦截器使用场景：

1. 处理全局错误：响应拦截器可以用来统一处理API请求的错误。当后端返回错误状态码，或者响应数据不符合预期时，我们可以在拦截器中进行统一的错误处理逻辑，例如弹窗提示、记录日志等。

2. 统一处理响应数据：有时候后端返回的数据格式可能与前端需要的格式不一致，或者包含了一些冗余信息。通过响应拦截器，我们可以对响应数据进行统一的处理和转换，使其符合前端的需求，并减少重复的数据转换代码。

3. 添加公共处理逻辑：在每个API请求返回之前，我们可能需要进行一些公共的处理逻辑，例如对响应进行解密、添加Token认证头部等操作。通过响应拦截器，我们可以避免在每个API请求中都重复编写这些操作，提高代码的复用性和可维护性。

4. 处理身份验证问题：在某些情况下，当后端返回特定的响应状态码，表示用户的身份验证已过期或无效时，我们可以在响应拦截器中进行相应的处理，例如跳转到登录页面或重新获取身份验证令牌。

总之，使用axios响应拦截器可以帮助我们实现统一的错误处理、数据转换和公共逻辑，提高代码的可维护性和复用性，并且方便地处理身份验证等问题。

🦄 食用方法：

1，在vue中main.js配置axios响应拦截器，将500这种公共状态码统一拦截。

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

2，后端代码异常进行测试

        try {
            System.out.println(10/0);
            user = dao.logindao(account,password);
            if(user==null) {
                commonData=new CommonData(201,"账号或密码输入有误，请重新输入！");
            }
            else {
                commonData=new CommonData(200,user,"登录成功");
            }
        } catch (Exception throwables) {

            commonData=new CommonData(500,"服务器忙...请稍后重试！");
        }

 

 成功。

路由导航守卫使用场景：

路由导航守卫是一种在路由导航过程中进行控制和限制的机制，常用于前端框架如Vue.js和Angular中。下面是几个常见的使用场景：

1. 身份验证：通过路由导航守卫可以确保用户在访问特定页面之前必须先进行身份验证。例如，当用户尝试访问需要登录的页面时，可以使用路由导航守卫检查用户是否已经成功登录，如果没有登录则将其重定向到登录页面。

2. 权限控制：在一些应用中，不同用户可能具有不同的权限级别。通过路由导航守卫，可以根据用户的角色或权限级别来限制他们能够访问的页面。只有具备足够权限的用户才能访问受限页面，否则将被重定向到其他页面。

3. 表单保存提醒：当用户在填写表单或编辑页面时，可能会因为意外关闭浏览器或者离开当前页面而丢失数据。通过路由导航守卫，可以在用户离开页面之前提醒用户保存未提交的表单数据，以防止数据丢失。

4. 页面加载控制：有时候需要在加载某个页面之前执行一些操作，例如获取数据、检查特定条件或执行其他异步任务。在这种情况下，可以使用路由导航守卫来控制页面是否能够加载或延迟加载，以便在必要的时候进行相关操作。

这些场景只是路由导航守卫的一部分应用，实际上，你可以根据具体需求创造更多的使用场景。总之，路由导航守卫提供了一种灵活和可靠的方式来管理和控制用户的访问行为。

🐇食用方法：

 1，vue文件保存当前账号

else if (resp.data.code == 200) {
						this.$message({
							message: resp.data.message,
							type: 'success'
						});
						sessionStorage.setItem("account", resp.data.data.account);
						this.$router.push("/main"); //在js中进行路由导航
					}

2，index文件配置路由 

rout.beforeEach((to, from, next) => {
	if (to.path == '/login') {
		//如果用户访问的登录页， 直接放行
		return next();
	} else {
		var account = window.sessionStorage.getItem("account");
		if (account == null) {
			return next("/login");
		} else {
			next();
		}
	}
})

呈现结果：

在当前会话中可以任意切换Login和Main页面。

如果Key和Value为空，就不能任意切换。