springboot前后端交互（小白教学）

最新推荐文章于 2024-11-15 12:02:03 发布

原创

最新推荐文章于 2024-11-15 12:02:03 发布 · 6.2k 阅读

49 ·

CC 4.0 BY-SA版权

文章标签：

#spring boot #前端 #后端

本文介绍如何使用SpringBoot结合JWT实现前后端分离项目的用户认证功能，包括添加路由守卫、验证token流程、实现登录功能等关键步骤。

在上次前后端交互，我们使用的是最基本的HTML+Servlet的组合，比较基础，今天我们来讲一讲Html+Springboot框架，前后端交互实现更为简便，大大降低了我们开发人员在代码上面所花费的时间，那今天让我们一探究竟吧。

1.添加路由守卫

在前端我们在index.js中添加了路由守卫

在网址中直接去http://localhost:8081/#/main

由于路由守卫，我们不能直接进入main页面中，自动给我们跳转到登录页面中

2.验证token

添加token一块有4步：

登录成功后，后端生成token
前端接收，并保存
前端拦截器向后端发送
后端拦截器验证token

1. 登录成功后，后端生成token

package com.ffyc.common;


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.context.annotation.Configuration;
import org.springframework.stereotype.Service;

import java.util.Date;
import java.util.HashMap;
import java.util.Map;

@Service
public class JWTUtil {

    /**
     * jwt 生成 token
     *
     * @param id
     * @param account * @return
     */
    public static String token(Integer id, String account) {
        String token = "";
        try {
            //过期时间 为 1970.1.1 0:0:0 至 过期时间 当前的毫秒值 + 有效时间
            Date expireDate = new Date(new Date().getTime() + 60 * 60 * 24 * 1000);//过期时间
            //秘钥及加密算法  加盐
            Algorithm algorithm = Algorithm.HMAC256("ZCEQIUBFKSJBFJH2020BQWE");
            //设置头部信息
            Map<String, Object> header = new HashMap<>();
            header.put("typ", "JWT");//生成的类型
            header.put("alg", "HS256");//加密算法
            //携带 id，账号信息，生成签名
            token = JWT.create()