会话存储、本地存储，路由导航守卫、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

//登录成功后向当前用户生成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;
   });