Springboot整合JWT生成token,并在vue通过cookie存储token,及通过token获取用户信息

Springboot整合JWT生成token

第一步：将jwt依赖导入pom文件

<dependency>
    <groupId>io.jsonwebtoken</groupId>
    <artifactId>jjwt</artifactId>
    <version>0.7.0</version>
</dependency>

第二步：编写jwt生成工具类JwtUtils，代码如下：

public class JwtUtils {

    //常量
    public static final long EXPIRE = 1000 * 60 * 60 * 24; //token过期时间
    public static final String APP_SECRET = "ukc8BDbRigUDaY6pZFfWus2jZWLPHO"; //秘钥 这是自定义的，可以根据自己的想法写

    //生成token字符串的方法
    public static String getJwtToken(String id, String nickname){

        String JwtToken = Jwts.builder()
                .setHeaderParam("typ", "JWT")
                .setHeaderParam("alg", "HS256")

                .setSubject("lory-user")  //自定义名称
                .setIssuedAt(new Date())
                .setExpiration(new Date(System.currentTimeMillis() + EXPIRE))

                .claim("id", id)  //id:用户id,nickname:用户姓名,设置token主体部分 ，存储用户信息,也可以自定义自己写
                .claim("nickname", nickname)

                .signWith(SignatureAlgorithm.HS256, APP_SECRET)
                .compact();

        return JwtToken;
    }

    /**
     * 判断token是否存在与有效
     * @param jwtToken
     * @return
     */
    public static boolean checkToken(String jwtToken) {
        if(StringUtils.isEmpty(jwtToken)) return false;
        try {
            Jwts.parser().setSigningKey(APP_SECRET).parseClaimsJws(jwtToken);
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
        return true;
    }

    /**
     * 判断token是否存在与有效
     * @param request
     * @return
     */
    public static boolean checkToken(HttpServletRequest request) {
        try {
            String jwtToken = request.getHeader("token");
            if(StringUtils.isEmpty(jwtToken)) return false;
            Jwts.parser().setSigningKey(APP_SECRET).parseClaimsJws(jwtToken);
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
        return true;
    }

    /**
     * 根据token字符串获取id
     * @param request
     * @return
     * HttpServletRequest 由于后端会将token传前端，前端会将token存储在cookie,所以这里传入HttpServletRequest 获取cookie里面的token，然后返回用户id
     */ 
    public static String getMemberIdByJwtToken(HttpServletRequest request) {
        String jwtToken = request.getHeader("token");
        if(StringUtils.isEmpty(jwtToken)) return "";
        Jws<Claims> claimsJws = Jwts.parser().setSigningKey(APP_SECRET).parseClaimsJws(jwtToken);
        Claims claims = claimsJws.getBody();
        return (String)claims.get("id"); //此id就是根据上面getJwtToken方法设置的用户id，后端就可以通过此id获取用户信息
    }
}

第三步：在自己的登录业务逻辑层调用JwtUtils类生成token和通过token获取用户信息的接口
第四步：前端导入js-cookie

npm install js-cookie

第五步：在request.js里面设置拦截器，我的目录如下：

//http request拦截器
service.interceptors.request.use(
   config=>{
    //判断coikies是否有lory_token
    if(Cookies.get('lory_token')){
      //把获取的值放到headers
      config.headers['token']=Cookies.get('lory_token')
    }
    return config
   },
   err=>{
    return Promise.reject(err);
   }

)

第五步：在你的登录页面调用相应的登录方法，如图：

  //第一步 调用接口进行登录，返回token字符串
        loginApi.submitLoginUser(this.user) 
           .then(response => {
             //第二步 获取token字符串放到cookie里面
             //第一个参数cookie名称，第二个参数值，第三个参数作用范围
             cookie.set('lory_token',response.data.data.token,{domain: 'localhost'})
             
              //第四步 调用接口 根据token获取用户信息，为了首页面显示
              loginApi.getLoginUserInfo()
                .then(response => {
                  console.log(response);
                  this.loginInfo = response.data.data.userInfo
                  //获取返回用户信息，放到cookie里面
                  cookie.set('userInfo',this.loginInfo,{domain: 'localhost'})

                  //跳转页面
                  window.location.href = "/";
                })
           })