免费网站风格中通物流企业网站建设书

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;});