【SpringBoot+Vue】前后端分离项目之JWT登录拦截

当用户不需要输入账号密码直接通过网址到后台的话，那么是十分危险的。所以才有了登录拦截的思想，但凡没有登录过的就需要拦截下来。JWT又称Json Web Token。具体思路就是：

1、服务器生成一个Json格式的Token给客服端保存到浏览器当中，这里我采用的是localStorage当地存储而不是sessionStorage会话存储。这里的区别就是sessionStorage是当浏览器关闭就会删除其存储的token。

2、当每次访问一个页面（也可以说是调用前端接口方法）时就会向服务器传回去token进行校验，如果不是刚开始存储的token又或者是过期的token，那么我直接返回到登录页面。

3、服务器再对这个token进行校验，通过返回true，失败返回false。

具体代码如下：

前端：

import Axios from 'axios'
import VueRouter from 'vue-router'

VueRouter.beforeEach((to,from,next) => {
  if(to.path === "/"){
    window.localStorage.removeItem('access-admin')
    next()
  }else{
    let admin = JSON.parse(window.localStorage.getItem('access-admin'))
    if(!admin){
      next("/")
    }else{
      //校验token合法性
      Axios({
        url:'http://localhost:8080/userlogin/checkToken',
        method:'get',
        headers:{
          token:admin
        }
      }).then((resp) => {
        if(!resp.data){
          next("/")
        }
      })
      next()
    }
  }
})

//获取原型对象上的push函数
const originalPush = VueRouter.prototype.push
//修改原型对象中的push方法
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

后端：

package com.chf.util;

import com.auth0.jwt.JWT;
import com.auth0.jwt.JWTVerifier;
import com.auth0.jwt.algorithms.Algorithm;
import com.auth0.jwt.interfaces.DecodedJWT;
import org.springframework.stereotype.Component;

import java.util.Calendar;
import java.util.HashMap;
import java.util.Map;

//先准备一个关于Json Web Token的工具类
@Component
public class JWTUtil {
    //token私钥
    static Algorithm algorithm = Algorithm.HMAC256("f26e587c28064d0c855c72c0a6a0e618");

    /**
     * 生成token
     * @param username
     * @param password
     * @return
     */
    public static String createToken(String username,String password){
        Calendar calendar = Calendar.getInstance();
        calendar.add(Calendar.SECOND,15 * 60);
        Map header = new HashMap<>();
        header.put("typ", "JWT");
        header.put("alg", "HS256");
        return JWT.create()
                .withHeader(header)
                .withClaim("username",username)
                .withClaim("password",password)
                .withExpiresAt(calendar.getTime())
                .sign(algorithm);//签名密钥算法
    }

    /**
     * 校验token
     * @param token
     * @return
     */
    public static boolean verify(String token){
        if(token == null){
            return false;
        }
        try{
            JWTVerifier jwtVerifier = JWT.require(algorithm).build();
            jwtVerifier.verify(token);
            return true;
        }catch (Exception e){
            e.printStackTrace();
            return false;
        }
    }
}

@RestController
@RequestMapping("/userlogin")
public class LoginController {
    @GetMapping("/checkToken")
    public Boolean checkToken(HttpServletRequest request){
        String token = request.getHeader("token");
        return JWTUtil.verify(token);
    }
}