Springboot整合jwt实现和前端交互的Token认证

最新推荐文章于 2024-05-30 15:07:12 发布

秋水qs

最新推荐文章于 2024-05-30 15:07:12 发布

阅读量1k

点赞数 2

文章标签：前端 spring boot java

本文链接：https://blog.csdn.net/m0_66893068/article/details/126262869

版权

4，新添一个配置类，来配置对那些请求进行拦截。

JWT验证流程

首先，前端通过Web表单将自己的用户名和密码发送到后端的接口。这一过程- 
-般是一 个HTTP POST请求。建议的方式是通过SSL加密的传输(https协议) 
，从而避免敏感信息被嗅探。

后端核对用户名和密码成功后，将用户的id等其他信息作为JWT Payload 
(负载)，将其与头部分别进行Base64编码拼接后签名，形成一个JWT(Token)。
形成的JWT就是一个形同11. zzz. xxx的字符串。token head .
 payload . singurater

后端将JWT字符串作为登录成功的返回结果返回给前端。 
前端可以将返回的结果保存在localStorage或sessionStorage上， 
退出登录时前端删除保存的JWT即可。

前端在每次请求时将JWT放入HTTP Header中的Authorization位。 
(解决XSS和XSRF问题)

后端检查是否存在，如存在验证JWT的有效性。例如，检查签名是否正确;
检查Token是否过期;检查Token的接收方是否是自己(可选)

验证通过后后端使用JWT中包含的用户信息进行其他逻辑操作，
返回相应结果。

后端

1，在pom.xml中导入jwt包

        <!--token实现包-->
        <dependency>
            <groupId>com.auth0</groupId>
            <artifactId>java-jwt</artifactId>
            <version>3.19.2</version>
        </dependency>

2，新增一个工具类。

package com.example.demo.utils;

import com.auth0.jwt.JWT;
import com.auth0.jwt.JWTVerifier;
import com.auth0.jwt.algorithms.Algorithm;
import com.auth0.jwt.interfaces.DecodedJWT;
import com.example.demo.pojo.User;
import java.util.Date;

public class TokenUtils {
    private static final long EXPIRE_TIME= 10*60*60*1000;
    private static final String TOKEN_SECRET="txdy";  //密钥盐
    /**
     * 签名生成
     * @param user
     * @return
     */
    public static String sign(User user){
        String token = null;
        try {
            Date expiresAt = new Date(System.currentTimeMillis() + EXPIRE_TIME);
            token = JWT.create()
                    .withIssuer("auth0")
                    .withClaim("userAccount", user.getUserAccount() )
                    .withExpiresAt(expiresAt)
                    // 使用了HMAC256加密算法。
                    .sign(Algorithm.HMAC256(TOKEN_SECRET));
        } catch (Exception e){
            e.printStackTrace();
        }
        return token;
    }
    /**
     * 签名验证
     * @param token
     * @return
     */
    public static boolean verify(String token){
        try {
            JWTVerifier verifier = JWT.require(Algorithm.HMAC256(TOKEN_SECRET)).withIssuer("auth0").build();
            DecodedJWT jwt = verifier.verify(token);
            System.out.println("认证通过：");
            System.out.println("userAccount: " + jwt.getClaim("userAccount").asString());
            System.out.println("过期时间：      " + jwt.getExpiresAt());
            return true;
        } catch (Exception e){
            return false;
        }
    }
}

3，写入拦截器

package com.example.demo.utils;

import com.alibaba.fastjson.JSONObject;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@Component
public class TokenInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)throws Exception{
        if(request.getMethod().equals("OPTIONS")){
            response.setStatus(HttpServletResponse.SC_OK);
            return true;
        }
        response.setCharacterEncoding("utf-8");
        String token = request.getHeader("token"); //前端vue将token添加在请求头中
        if(token != null){
            boolean result = TokenUtils.verify(token);
            if(result){
                System.out.println("通过拦截器");
                return true;
            }
        }
        response.setCharacterEncoding("UTF-8");
        response.setContentType("application/json; charset=utf-8");
        try{
            JSONObject json = new JSONObject();
            json.put("msg","token verify fail");
            json.put("code","50000");
            response.getWriter().append(json.toJSONString());
            System.out.println("认证失败，未通过拦截器");

        }catch (Exception e){
            e.printStackTrace();
            response.sendError(500);
            return false;
        }
        return false;
    }
}

4，新添一个配置类，来配置对那些请求进行拦截。

package com.example.demo.utils;
import org.springframework.context.annotation.Configuration;
import org.springframework.scheduling.concurrent.ConcurrentTaskExecutor;
import org.springframework.web.servlet.config.annotation.AsyncSupportConfigurer;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.Executors;

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    /**
     * 开启跨域
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // 设置允许跨域的路由
        registry.addMapping("/**")
                // 设置允许跨域请求的域名
                .allowedOrigins("*")
                // 是否允许携带cookie参数
                .allowCredentials(true)
                // 设置允许的方法
                .allowedMethods("*")
                // 跨域允许时间
                .maxAge(3600);
    }

    private TokenInterceptor tokenInterceptor;

    //构造方法
    public WebMvcConfig(TokenInterceptor tokenInterceptor) {
        this.tokenInterceptor = tokenInterceptor;
    }

    @Override
    public void configureAsyncSupport(AsyncSupportConfigurer configurer) {
        configurer.setTaskExecutor(new ConcurrentTaskExecutor(Executors.newFixedThreadPool(3)));
        configurer.setDefaultTimeout(30000);
    }

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        List<String> excludePath = new ArrayList<>();
        //排除拦截，除了注册登录(此时还没token)，其他都拦截
        excludePath.add("/api/register");  //登录
        excludePath.add("/api/login");     //注册
        excludePath.add("/img/**");  //静态资源
        excludePath.add("/song/**");  //静态资源
        excludePath.add("/api/getPublicKey");

        registry.addInterceptor(tokenInterceptor)
                .addPathPatterns("/**")
                .excludePathPatterns(excludePath);
        WebMvcConfigurer.super.addInterceptors(registry);
    }
}

然后在更改一下controller中的登录方法。为了这几行代码就看清楚传了什么所以没有用已经写好的code返回类进行向前端返回东西。springboot要写的基本就这些，最好可以是熟悉这套逻辑后在cv。

前端

1，配置store/index.js

 import Vue from 'vue'
 import Vuex from 'vuex'

 Vue.use(Vuex)

export default new Vuex.Store({
  state: {
      user: localStorage.getItem('username') ? localStorage.getItem('username') : null,
      //若localSorage存在token，将值赋给Vuex.state.token
      token: localStorage.getItem('token') ? localStorage.getItem('token') : null
  },
  mutations: {
        setUsername(state, username) {
          state.username = username
          localStorage.setItem('username', username)
      },
      setToken(state, token) {
          localStorage.setItem('token', token)
          state.token = token
      },
       //我页面中写了退出登录的按钮所以补了一个logout用来清空localStorage中的数据
      logout(state) {
          localStorage.removeItem('token')
          state.token = null
          localStorage.removeItem('username')
          state.setUsername = null
           //我写的RSA加密需向后端获取公钥，为了方便我在拿到公钥后直接存入localStorage中，所以在这里也要清空
          localStorage.removeItem('publickey')
          state.publickey=null
      }
  }
})

2，然后修改登录方法即可。

login () {
      var _this = this
      console.log(this.$store.state)
      // 获取公钥进行加密，可以省略此步骤
      this.$axios.get('/getPublicKey').then(res => {
        let publicKey = res.data;
        // 如果有数则向后台传递数据
        if (publicKey) {
          //  onsole.log(this.publicKey)
          let encrypt = new JSEncrypt()
          encrypt.setPublicKey(publicKey)
          this.$axios.post('/login', {
            // post方式向后端传输数据,其地址应是/api/login
            username: this.loginForm.username,
            password: encrypt.encrypt(this.loginForm.password)
          }).then(successResponse => {
            // 200为通过
            if (successResponse.data.code === 200) {
               _this.$store.commit('setToken',successResponse.data.token);
               var data = this.loginForm
               _this.$store.commit('setUsername', successResponse.data.username)
               var path = this.$route.query.redirect;
           //跳转到登录成功后的页面
               this.$router.replace({ path: path === '/' || path === undefined ? '/index' : path });
            } else if(successResponse.data.code === 400){
              // 400后端返回的是登录名已存在，弹窗提示
              alert(successResponse.data.msg)
            }
          })
            .catch(failResponse => {
            })
        } else {
              this.$message.error('获取公钥失败')
        }
      })
    }

然后测试即可，这个是登录后8443后端返回的数据，username我是用来其他业务，正常来说可以传过来对象，或者不传。