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
//登录成功后向当前用户生成token
String 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{
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
HttpServletRequest request=(HttpServletRequest)servletRequest;//向下转型
String token=request.getHeader("token");//获取请求体中的token
//验证token
boolean 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;
});
