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项目引用

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')

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

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