会话存储、本地存储,路由导航守卫、web会话跟踪、JWT生成token、axios请求拦截、响应拦截

1、会话存储、本地存储

前端浏览器中存储用户信息,会话存储、本地存储、cookie

会话存储(sessionStorage):会话期间存储,关闭浏览器后,数据就会销毁

sessionStorage.setItem("account",resp.data.result.account);//会话存储

 根据后端响应回来的结果进行处理resp.data(result对象)

var account=sessionStorage.getItem("account");

 获取account值,用来在浏览器的显示。 

本地存储(localStorage):即使关闭浏览器,下次打开还是存在,可以长久保存

setItem、getItem用法和sessionStorage的用法一样

2、路由导航守卫

使用的vue-router中的路由导航守卫,在前端每次发生路由跳转时会触发beforeEach()进行拦截。

使用案例如:在前端判断用户是否登录,除了登录界面的组件,其他界面组件都需要判断是否登录,登录之后才可以进行访问。判断访问哪些组件、哪些组件需要登录,哪些组件不需要登录

//路由导航守卫,每当前端发生一次路由跳转时,会自动的触发beforeEach()
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();}}
})

 3、web会话跟踪

会话:从客户打开浏览器并连接的服务器开始,到客户关闭浏览器离开服务器结束,被称为一个会话。

为什么要会话跟踪:因为http请求是无状态的,只有当用户发出请求时,服务器才会做出响应,客户端与服务端之间的联系是离散的,非连续的;如果用户想在同一个网站的多个页面之间转换时,无法确定是否是同一个用户;对会话进行跟踪就是为了解决这样的问题。

会话跟踪是web程序中常用的技术,用来跟踪用户的整个会话过程。给客户端颁发一个通行证,每人一个,无论谁访问都必须携带自己通行证,这样服务器就能从通行证上确认客户身份了。

token

token是服务端生成的一串字符串,以作客户端进行请求的一个令牌,当第一次登录后,服务器生成一个token便将此token返回给客户端,以后客户端只需要带上这个token前来请求数据即可。token保存在客户端,并且进行了加密,保证了数据的安全性

目的:token的目的是为了减轻服务器的压力,是服务器更加健壮。

 4、JWT生成token

引入JWT依赖,由于是基于Java,所以需要的是java-jwt

<dependency><groupId>com.auth0</groupId><artifactId>java-jwt</artifactId><version>3.8.2</version></dependency>

 在学习初期直接用这段代码

package com.ffyc.dormserver.until;import com.auth0.jwt.JWT;
import com.auth0.jwt.JWTVerifier;
import com.auth0.jwt.algorithms.Algorithm;
import com.auth0.jwt.interfaces.DecodedJWT;
import com.ffyc.dormserver.model.Admin;import java.util.Date;
import java.util.HashMap;
import java.util.Map;/*** JWT工具类*/
public class JWTUtil {/*** 根据用户id,账号生成token* @param admin* @return */public static String getToken(Admin admin) {String token = "";try {//过期时间 为1970.1.1 0:0:0 至 过期时间  当前的毫秒值 + 有效时间Date expireDate = new Date(new Date().getTime() + 10*1000);//有效时间可以根据有需要进行修改//秘钥及加密算法Algorithm algorithm = Algorithm.HMAC256("ZCEQIUBFKSJBFJH2020BQWE");//ZCEQIUBFKSJBFJH2020BQWE是进行加密//设置头部信息Map<String,Object> header = new HashMap<>();header.put("typ","JWT");header.put("alg","HS256");//携带id,账号信息,生成签名token = JWT.create().withHeader(header).withClaim("id",admin.getId()).withClaim("account",admin.getAccount()).withExpiresAt(expireDate).sign(algorithm);}catch (Exception e){e.printStackTrace();return  null;}return token;}/*** 验证token是否有效* @param token* @return*/public static boolean verify(String token){try {//验签Algorithm algorithm = Algorithm.HMAC256("ZCEQIUBFKSJBFJH2020BQWE");JWTVerifier verifier = JWT.require(algorithm).build();DecodedJWT jwt = verifier.verify(token);return true;} catch (Exception e) {//当传过来的token如果有问题,抛出异常return false;}}/*** 获得token 中playload部分数据,按需使用* @param token* @return*/public static DecodedJWT getTokenInfo(String token){return JWT.require(Algorithm.HMAC256("ZCEQIUBFKSJBFJH2020BQWE")).build().verify(token);}}

 生成token

//登录成功后向当前用户生成tokenString token= JWTUtil.getToken(admin);

5、axios请求拦截 、响应拦截

请求拦截

使用axios框架向后端发送请求时,都会经过拦截器,我们将生成的token添加到请求头中

在main.js中进行配置

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

 以便与在后端进行token验证,向前端进行一个响应。

下面是一个token验证过滤器示例

package com.ffyc.dormserver.filter;import com.fasterxml.jackson.databind.ObjectMapper;
import com.ffyc.dormserver.model.Result;
import com.ffyc.dormserver.until.JWTUtil;import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import java.io.IOException;
@WebFilter(urlPatterns = "/api/*")
public class TokenFilter implements Filter{@Overridepublic void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {HttpServletRequest request=(HttpServletRequest)servletRequest;//向下转型String token=request.getHeader("token");//获取请求体中的token//验证tokenboolean res=JWTUtil.verify(token);if (res){filterChain.doFilter(servletRequest, servletResponse);}else {Result result=new Result(401, "认证失败", null);servletResponse.getWriter().print(new ObjectMapper().writeValueAsString(result));}}
}

响应拦截

通过后端响应的code进行拦截,执行其他操作

在main.js中进行配置

// 添加响应拦截器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;});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/50196.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

反射型与dom型的xss的区别【源码分析】

反射型 XSS 和 DOM 型 XSS 都属于跨站脚本攻击 (XSS) 的类型&#xff0c;它们的共同点是均能通过注入恶意脚本在用户浏览器中执行&#xff0c;不同点是dom型xss不经过服务器&#xff0c;而反射型是经过服务器的。但是&#xff0c;它们在攻击方式、执行过程和防御措施上有所不同…

flask后端+vue前端——后端怎么发文件给前端?

首先&#xff0c;前端axios请求的responseType要设置为blob const service axios.create({baseURL: http://127.0.0.1/api,timeout: 5000});//向后端发送数据&#xff0c;后端根据这个数据data生成文件返回send_coordinate(data){return service.post(/,data,{responseType: …

c++栈笔记

一种常见的数据结构&#xff0c;遵循后进先出&#xff0c;先进后出的原则。地址不连续&#xff0c;栈顶&#xff08;top&#xff09; 1.常见函数 stack<int> s;定义一个参数类型为int 的栈 名为ss.push()向栈中插入元素s.emplace()压栈&#xff0c;无返回值s.pop()删除…

@SpingFrameWork

SpingFrameWork 一、技术体系结构 单一架构&#xff0c;一个大的项目&#xff0c;一个工程&#xff0c;导出war包在一个tomcat上运行&#xff08;主要用spring、springMVC、Mybatis&#xff09;分布式架构&#xff0c;一个项目&#xff0c;但是有多个模块&#xff0c;但是每个…

摆脱想得太多做得太少的困境,拥抱财富与成功

在生活的舞台上,我们常常目睹这样的场景:有些人怀揣着美好的梦想和周全的计划,却始终未能迈出实质性的步伐,最终被困顿的现状所束缚。就如同那位卖豆腐的人,每日在夜里为自己编织着绚烂的未来蓝图,却在黎明来临时,依旧重复着昨日卖豆腐的生活,一辈子在原地徘徊,无法挣…

Servlet2-HTTP协议、HttpServletRequest类、HttpServletResponse类

目录 HTTP协议 什么是HTTP协议 HTTP协议的特点 请求的HTTP协议格式 GET请求 POST请求 常用的请求头说明 哪些是GET请求&#xff0c;哪些是POST请求 响应的HTTP协议格式 常见的响应码说明 MIME类型说明 HttpServletRequest类 作用 常用方法 如何获取请求参数 po…

IP 泄露: 原因与避免方法

始终关注您的IP信息&#xff01; 您的IP地址不仅显示您的位置&#xff0c;它包含几乎所有的互联网活动信息&#xff01; 如果出现IP泄漏&#xff0c;几乎所有的信息都会被捕获甚至非法利用&#xff01; 那么&#xff0c;网站究竟如何追踪您的IP地址&#xff1f;您又如何有效…

Layui---输入事件

输入实时监听 //监听表单单选框复选框选择 form.on(radio, function (data) {console.log(data.value); //得到被选中的值 });//监听表单下拉菜单选择form.on(select, function (data) //监听表单下拉菜单选择form.on(select, function (data) ​ //监听表单复选框选择form.…

从0开始的STM32HAL库学习9

定时器输入捕获测频率 生成待测信号 配置环境 选择如上图所示 代码修改 在main函数中加入 HAL_TIM_PWM_Start(&htim2,TIM_CHANNEL_1); 测量信号频率 配置环境 如图所示打开TIM3定时器 1. 设置TI1FP1为ResetMode,即清空计数 2. 使用内部时钟 3. 通道 1 设置为输…

日本的便利店真的“无所不能”?!简直不要太方便了

众所周知&#xff0c;日本便利店可谓是日本人离不来的存在了&#xff01;真真是“要啥有啥”&#xff0c;可以说日本的便利店才是真正意义上的“便利”~ 那日本的便利店到底有什么与众不同呢&#xff1f;&#xff1f;今天小编来带大家盘点一下日本便利店的那些服务。 一、购票…

Python学习计划——5.2继承、多态和封装

面向对象编程的三个重要概念是继承、多态和封装。它们使得代码更具可重用性、灵活性和安全性。以下是详细的讲解和Python案例。 1. 继承 继承允许一个类&#xff08;子类&#xff09;从另一个类&#xff08;父类&#xff09;继承属性和方法。通过继承&#xff0c;子类可以复用…

《2024新质生产力引领下十大重点产业趋势解读--大模型篇》,深剖当下爆火的大模型产业!

01 报告导读 “新质生产力”重要性再提升。 近日&#xff0c;作为热词的“新质生产力”再度被多次提及&#xff0c;“新质生产力”这一概念近年来在经济和社会发展中被频繁提及&#xff0c;它指的是通过创新驱动&#xff0c;利用新技术、新业态、新模式推动生产力发展的新形态…

深入解析Memcached:C#中的应用与实战案例

目录 Memcached简介Memcached的特点Memcached的工作原理Memcached的应用场景Memcached的安装和配置Memcached与C#的集成 引入依赖配置Memcached客户端C#代码示例 存储数据读取数据删除数据深入解析Memcached 数据存储和过期策略分布式架构性能优化实战案例 缓存数据库查询结果实…

opencascade AIS_MouseGesture AIS_MultipleConnectedInteractive源码学习

AIS_MouseGesture //! 鼠标手势 - 同一时刻只能激活一个。 enum AIS_MouseGesture { AIS_MouseGesture_NONE, //!< 无激活手势 // AIS_MouseGesture_SelectRectangle, //!< 矩形选择&#xff1b; //! 按下按钮开始&#xff0c;移动鼠标定义矩形&…

CSP-J12023入门级第一轮错题

CSP-J12023入门级第一轮 假设有一个链表的节点定义如下&#xff1a; struct Node {int data;Node* next; };现在有一个指向链表头部的指针&#xff1a;Node* head。如果想要在链表中插入一个新节点&#xff0c;其成员data的值为42&#xff0c;并使新节点成为链表的第一个节点&…

SQL语句补充与示例

在工作中对一些sql感觉陌生&#xff0c;补充一下学习。 SQL语句补充与示例 SQL&#xff08;Structured Query Language&#xff0c;结构化查询语言&#xff09;是一种用于管理和操作关系数据库的标准编程语言。SQL 语句用于执行各种数据库操作&#xff0c;包括查询、更新、插…

【Linux】玩转操作系统,深入刨析进程状态与调度机制

目录 1. 进程排队2. 进程状态的表述2.1. 进程状态2.2 运行状态2.3. 阻塞状态2.4. 挂起状态 3. Linux下具体的进程状态3.1. 运行状态R3.2. 可中断睡眠状态S3.3. 不可中断睡眠状态D3.4. 停止状态T3.5. 死亡状态X3.6. 僵尸状态Z 4. 孤儿进程5. 优先级6. Linux的调度与切换6.1. 四个…

基于STM32设计的老人摔倒检测系统(4G+华为云IOT)(193)

文章目录 一、前言1.1 项目介绍【1】项目功能介绍【2】项目硬件模块组成1.2 设计思路【1】整体设计思路【2】整体构架【3】上位机开发思路【4】供电方式1.3 项目开发背景【1】选题的意义【2】可行性分析【3】参考文献【4】课题研究的意义【5】国内外技术发展现状【6】课题研究思…

在linux上面用drissionpage自动化遇到反爬?

目录 一、反爬内容1、案例12、案例2 二、后来发现的问题解决 一、反爬内容 1、案例1 反爬的响应文本返回如下&#xff1a;爬虫均能精准识别,测试链接:https://ziyuan.baidu.com/crawltools/index)非正常爬虫访问时:返回的压缩报文内容无法直接识别,可一定程度上保护站点信息安…

C语言进阶——一文带你深入了解“C语言关键字”(中篇)

本篇文章属于C语言进阶篇的“C语言关键字”&#xff0c;旨在分享我对C语言关键字的深度学习和了解。同时带领大家深入浅出的走进C语言进阶知识——关键字篇&#xff01; 目录 一、变量的命名规则 二、标识符的命名规则 一、变量的命名规则 1、命名应当直观且可以拼读&#x…