vue3-13-编程知识

token可以是后端api的访问依据，一般绝大多数时候，前端要访问后端的api,后端都要求前端请求需要携带一个有效的token,这个token用于用户的身份校验，通过了校验，后端才会向前端返回数据，进行相应的操作，如果没有通过校验，后端则做其他处理。

之前后端代码并没有对前端请求进行token校验，之前的后端src/main/resources/application.properties的文件


spring.datasource.url=jdbc:mysql://localhost:3306/server?serverTimezone=UTC&allowPublicKeyRetrieval=true
spring.datasource.username=root
spring.datasource.password=1234spring.sql.init.mode=always
spring.sql.init.encoding=UTF-8interceptor.key=abcdefghijklmnopqrstuvwxyz0123456789
#NONE:不拦截
interceptor.mode=NONE
#拦截白名单，因为在登录的时候是没有token的，所以没有进行拦截校验
interceptor.whiteList=/api/loginJwt,/api/loginSessionlogging.level.com.lala.mapper=debug
spring.jackson.default-property-inclusion=non_null
mybatis.configuration.map-underscore-to-camel-case=true

src/main/java/com/lala/controller/LoginInterceptor.java文件

package com.lala.controller;import com.lala.service.SecretKeyService;
import io.jsonwebtoken.ExpiredJwtException;
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.MalformedJwtException;
import io.jsonwebtoken.UnsupportedJwtException;
import io.jsonwebtoken.security.SignatureException;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.servlet.HandlerInterceptor;import javax.crypto.SecretKey;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.stream.Stream;public class LoginInterceptor implements HandlerInterceptor {@Autowiredprivate SecretKeyService secretKeyService;//@Value将外部的值动态注入到Bean中/*这段代码是Spring框架中的一部分，用于从属性文件中注入值。@Value 注解用于将属性文件中的值注入到字段中。在这个例子中，它试图从属性文件中获取一个名为 interceptor.mode 的值，并把它赋给 InterceptorMode 类型的 interceptorMode 字段。如果没有找到这个属性，那么 InterceptorMode.NONE 将被赋给 interceptorMode。*/@Value("${interceptor.mode}")private final InterceptorMode interceptorMode = InterceptorMode.NONE;@Value("${interceptor.whiteList}")private String[] interceptorWhiteList;@Overridepublic boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) {//浏览器在跨域的时候，可能发送一个OPTIONS请求，对这个请求不做拦截，或者是白名单的请求也不做拦截if ("OPTIONS".equals(request.getMethod()) ||Stream.of(interceptorWhiteList).anyMatch(p -> p.equals(request.getRequestURI()))) {return true;}switch (interceptorMode) {case JWT -> {String token = request.getHeader("Authorization");System.out.println("token=" + token);if (token == null) {//未携带 tokenthrow new Exception401("未携带 token");}try {SecretKey secretKey = secretKeyService.getSecretKey();//根据secretKey生成tokenJwts.parserBuilder().setSigningKey(secretKey).build().parseClaimsJws(token);} catch (ExpiredJwtException | UnsupportedJwtException | MalformedJwtException | SignatureException |IllegalArgumentException e) {//校验 token 失败throw new Exception401("校验 token 失败");}}case SESSION -> {Object user = request.getSession().getAttribute("user");if (user == null) {//校验 session 失败throw new Exception401("校验 session 失败");}}case NONE -> {return true;}}return true;}enum InterceptorMode {NONE, JWT, SESSION;}
}

修改src/main/resources/application.properties文件

#NONE:不拦截,JWT:拦截JWT,SESSION:拦截SESSION
interceptor.mode=JWT

src/main/java/com/lala/AppForServer4.java文件内容如下

package com.lala;import com.lala.controller.LoginInterceptor;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Bean;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@SpringBootApplication
public class AppForServer4 implements WebMvcConfigurer {@Beanpublic LoginInterceptor loginInterceptor() {return new LoginInterceptor();}@Overridepublic void addInterceptors(InterceptorRegistry registry) {//拦截以api打头的所有请求registry.addInterceptor(loginInterceptor()).addPathPatterns("/api/**");}@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("http://localhost:7070").allowedMethods("OPTIONS", "GET", "POST", "PUT", "DELETE").allowCredentials(true)//是否发送cookie.allowedHeaders("*").allowedOriginPatterns("*")//意味着任何来源都可以访问该应用.allowCredentials(true);}public static void main(String[] args) {SpringApplication.run(AppForServer4.class, args);}
}

这个时候登录就会做token校验

校验token失败是因为在登录的时候发送了下面的请求

const { runAsync: menu } = useRequest<AxiosRespMenuAndRoute, string[]>((username) => _axios.get(`/api/menu/${username}`), { manual: true })

这个请求没有携带合法的token

登录的时候还发送了另一个请求

const { runAsync: login } = useRequest<AxiosRespToken, LoginDto[]>((dto) => _axios.post('/api/loginJwt', dto), { manual: true })

这个请求在白名单中，被放行了

要在登录的时候携带合法的token,可以在src\api\request.ts文件中添加请求拦截器，在拦截器中可以对请求进行统一的处理，代码如下

import { message } from "ant-design-vue";
import axios from 'axios'  
import {serverToken} from '../router/a6router'
const _axios = axios.create({baseURL: import.meta.env.VITE_BACKEND_BASE_URL,timeout: 10000,headers: {"Content-Type": "application/json",},
});
_axios.interceptors.request.use((config)=>{// 如果登录成功if(serverToken.value){config.headers = {// 因为在登录的时候把token保存在本地存储里面了，可以从这里面获取token的值Authorization: serverToken.value}}return config},(error)=>{// 这里是把异常抛给调用者return Promise.reject(error)}
)
_axios.interceptors.response.use((res) => {if(res.data.message){message.success(res.data.message)}return res;
});
export default _axios

再登陆