前言
在现代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项目引用
- vue项目安装axios
- 导入axios组件
- 设置服务器地址
- 将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
- get:查询数据
- post:添加数据
- put:修改数据
- 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 --->欢迎大家和博主讨论问题
