后端实现jwt鉴权和前端代码

后端springboot代码引入依赖

<dependency>
    <groupId>io.jsonwebtoken</groupId>
    <artifactId>jjwt</artifactId>
    <version>0.9.1</version>
</dependency>
<dependency>
<groupId>javax.xml.bind</groupId>
<artifactId>jaxb-api</artifactId>
<version>2.3.1</version>
</dependency>

生成token

public class JWTUtil {

    private static final String SECRET_KEY = "jiazhanqiu";
    private static final long EXPIRATION_TIME = 86400000; // 24小时

    /*
    生成token
     */
    public static String generateToken(User user) {
        Date now = new Date();
        Date expiration = new Date(now.getTime() + EXPIRATION_TIME);

        String compact = Jwts.builder()
                .setSubject(user.getName())
                .setExpiration(expiration)
                .signWith(SignatureAlgorithm.HS256, SECRET_KEY)
                .compact();
        System.out.println(compact);
        return compact;
    }
    /*
    判断token是否过期
     */

    public static String getUserNameFromToken(String token) {
        Claims claims = Jwts.parser()
                .setSigningKey(SECRET_KEY)
                .parseClaimsJws(token)
                .getBody();

        Date expiration = claims.getExpiration();
        if (expiration.before(new Date())) {
            throw new ExpiredJwtException(null, null, "Token has expired");
        }

        return claims.getSubject();
    }
}

Controller代码

@RestController
public class UserController {

    @Autowired
    private IUserService userService;

    @PostMapping("/login")
    public Object login(@RequestBody User user) {
        if (user.getAccount().equals("1") && user.getPassword().equals("1")) {
            user.setName("贾湛秋");
            String s = JWTUtil.generateToken(user);
            return Result.success(s);
        } else
            return "fail";
    }

    @GetMapping("/test")
    public Object test() {
        return Result.success("成功");
    }

}
token校验

@Component
public class JwtInterceptor implements HandlerInterceptor {

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        String token = request.getHeader("Authorization");
        if (token == null) {
            response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
            System.out.println("无");
            return false;
        }
        try {
            String userName = JWTUtil.getUserNameFromToken(token);
            System.out.println(userName);
            return true;
        } catch (Exception e) {
            response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
            System.out.println("错");
            return false;
        }
    }
}
添加全局拦截器

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Autowired
    private JwtInterceptor jwtInterceptor;

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(jwtInterceptor)
                .addPathPatterns("/**")
                .excludePathPatterns("/login"); // 登录接口不拦截
    }
}

前端vue配置
登录界面

<template>

    <div>

        <el-form ref="form" :model="form" label-width="80px">

            <el-form-item label="账号">

                <el-input v-model="form.account"></el-input>

            </el-form-item>

            <el-form-item label="密码">

                <el-input v-model="form.password" show-password></el-input>

            </el-form-item>

            <el-button type="primary" @click="onSubmit">登录</el-button>

        </el-form>

    </div>

</template>

<script>

import axios, { Axios } from 'axios';

export default {

    data() {

      return {

        form: {

         account: "",

         password: "",

        },

        token: "",

      }

    },

    methods: {

      onSubmit() {

        var _this = this;

            axios({

                method: "post",

                url: "/api/login",

                data: _this.form,

            }).then(function (resp) {

                if (resp.data.msg == "success") {

                    _this.token = resp.data.data;

                    alert(_this.token)

                    localStorage.setItem("token", _this.token);

                    _this.$router.replace({ path: '/test'});

                } else {

                    alert("登录失败");

                }

            });

      }

    }

}

</script>

测试vue

<template>

    <div>

        {{ token }}

        <el-button type="primary" @click="onSubmit">测试</el-button>

    </div>

</template>

<script>

import axios, { Axios } from 'axios';

export default {

    data() {

        return {

            token: "",

        }

    },

    mounted() {

        this.token = window.localStorage.getItem("token");

    },

    methods: {

        onSubmit() {

            var _this = this;

            axios({

                method: "get",

                url: "/api/test",

                headers: {

                    "Authorization": _this.token  // 添加自定义的 Authorization 头

                }

            }).then(function (resp) {

                if (resp.data.msg == "success") {

                    _this.$message({

                        message: "测试成功",

                        type: "success",

                    });

                } else {

                    alert("测试失败");

                }

            });

        }

    }

}

</script>