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方法
javascript 复制代码
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方法
javascript 复制代码
this.$http.post("login", "account=" + this.account + "&password=" + this.password).then((resp) => {
     // 代码块
})

login---->组件地址

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

🌳axios请求拦截器

javascript 复制代码
//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添加拦截器

javascript 复制代码
// 添加响应拦截器
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判断写在其中即可



🌳路由守卫

javascript 复制代码
//路由导航守卫,每当前端发生一次路由跳转时,会自动触发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 --->欢迎大家和博主讨论问题

相关推荐
ajsbxi16 小时前
苍穹外卖学习记录
java·笔记·后端·学习·nginx·spring·servlet
记录成长java1 天前
ServletContext,Cookie,HttpSession的使用
java·开发语言·servlet
长安初雪1 天前
Request 和 Response 万字详解
计算机网络·servlet
A-bodgie1 天前
Spring 中的 Environment 对象
java·后端·spring·servlet·springboot
笔墨登场说说2 天前
JDK 里面的线程池和Tomcat线程池的区别
java·servlet·tomcat
听潮阁3 天前
【SpringCloud详细教程】-01-一文了解微服务
开发语言·spring boot·spring cloud·servlet·java-ee·mybatis
阑梦清川3 天前
JavaEE初阶-----servlet-api,Maven创建项目,部署,打包,测试全过程
servlet·java-ee·maven
阑梦清川4 天前
JavaEE初阶--servlet篇(三)HttpServlet/response/request对应方法使用
java·servlet·java-ee
awonw4 天前
[java][基础]HTTP&Tomcat&Servlet
java·http·servlet·tomcat
长安初雪5 天前
Servlet 3.0 注解开发
servlet