Servlet---axios框架 ▎路由守卫

前言

在现代Web应用中，前端和后端通常分离，前端使用框架（如Vue.js、React）与后端服务交互。Servlet是Java EE中处理HTTP请求的重要组成部分，能够生成动态Web内容。

Axios是一个基于Promise的HTTP客户端，简化了HTTP请求的发送和响应处理，具有拦截器等优势。路由守卫则在路由跳转前进行权限验证，确保用户只有在符合条件的情况下才能访问特定页面。

路由守卫的必要性体现在以下几点：提升安全性、改善用户体验和保护数据。结合Servlet和Axios，后端负责数据处理，而前端则通过Axios发起请求，并利用路由守卫确保用户访问控制，从而实现一个灵活且安全的Web应用架构。在接下来的内容中，我们将深入探讨如何具体实现这一结合。

🌳Axios安装

第一种:vue项目

使用npm直接安装

npm install axios

第二种:普通项目

引用js文件

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

🌳Axios使用

一:vue项目引用

1. vue项目安装axios
2. 导入axios组件
3. 设置服务器地址
4. 将axios挂载在全局

以下代码全是在main.js文件中配置

导入组件

//导入axios

import axios from 'axios';

设置服务器地址

//设置访问服务器地址
axios.defaults.baseURL = "http://127.0.0.1:8088/dormServer/"; 

 http://127.0.0.1:8088/dormServer/  ---->  服务器地址 

挂载全局

 //将 axios 挂载到 vue 全局对象中,并为其指定一个别名  $http是在vue对象中自定义的属性
Vue.prototype.$http = axio

  二:axios常用APl

1. get:查询数据
2. post:添加数据
3. put:修改数据
4. delete:删除数据

get方法

this.$http.get("api/student?mark=studentList").then((resp) => {

                  //代码块
})

 "api/student?mark=studentList"---->访问的组件地址

注:全称:http://127.0.0.1:8088/dormServer/api/student?mark=studentList,但因为上面已经配置服务器地址,这里就不需要写前面了.若改变服务器地址我们也只需改变上面axios配置的服务器地址

mark=studentList  传回后端的数据

post方法 

this.$http.post("login", "account=" + this.account + "&password=" + this.password).then((resp) => {
     // 代码块
})

login---->组件地址

"account=" + this.account + "&password=" + this.password-->传回后端数据

🌳axios请求拦截器

//axios 请求拦截,每当我们使用axios框架向后端发送请求时,都会经过拦截器
axios.interceptors.request.use(config => {
	//为请求头对象，添加 Token 验证的 token 字段
	config.headers.token = sessionStorage.getItem('token');
	return config;
})

作用:前端每次和后端交互,axios请求拦截都会执行一次,他可以将秘钥(token)传回后端.

解释:因为前端数据操作有时候需要权限,而token就起到权限的作用,每次访问后端先验证token权限,如果权限足够才可进行下一步操作.而每次访问后端都需要token,所以axios框架做了axios请求拦截,每当前端访问后端就会执行拦截器中代码

🌳axios添加拦截器

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

作用:每次后端与前端交互,axios添加拦截器都会执行一次,他可以验证后端传回前端的code(状态码)

解释:后端做出的响应(code(状态码),message(解释),Object(数据)),而每次后端向前端的响应,前端都需要判断code,我们就需要在所有的前端组件中写if判断,而axios框架提供添加拦截器,也就是每次后端做出响应,前端最先执行添加拦截器,我们只需要将相似code判断写在其中即可

---

---

🌳路由守卫

//路由导航守卫,每当前端发生一次路由跳转时,会自动触发bdforeEach()
rout.beforeEach((to, from, next) => {
	if (to.path == '/login') {
		//如果用户访问的登录页，直接放行
		return next();
	}else if(to.path == '/enroll'){
		return next();
	}else {
		var account = sessionStorage.getItem("account");
		if (account == null) {
			return next("/login");
		} else {
			next();
		}
	}
})

作用:每次前端网页切换,都会执行一次,验证前端是否登录(前端验证权限)

解释:防止直接访问前端需登录网站,也就是如果这个网站需要登录才可进入,则每次访问我们都需要验证是否登录.如果不是需要登录访问,我们直接放行(例:上面'/login') 

---

---

 感谢大家的观看，本次分享就到这里。希望我的内容能够对您有所帮助。创作不易，欢迎大家多多支持，您的每一个点赞都是我持续更新的最大动力！如有不同意见，欢迎在评论区积极讨论，让我们一起学习、共同进步！如果有相关问题，也可以私信我，我会认真查看每一条留言。期待下次再见！

                                       希望路飞的笑容可以治愈努力路途中的你我!

博主vx:Dreamkid05 --->欢迎大家和博主讨论问题