关于vue+axios+jwt登录的问题

JWT Filter

package com.zuijin.vue2blog.component;

import com.zuijin.vue2blog.common.utils.JwtUtil;
import com.zuijin.vue2blog.service.UserComDetailsService;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
import org.springframework.security.core.context.SecurityContextHolder;
import org.springframework.security.core.userdetails.UserDetails;
import org.springframework.security.web.authentication.WebAuthenticationDetailsSource;
import org.springframework.web.filter.OncePerRequestFilter;

import javax.annotation.Resource;
import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * ClassName:    JwtAuthenticationTokenFilter
 * CreateBy:     IntelliJ IDEA
 * Author:       醉瑾
 * Date:         2022-04-21
 * Description :
 */

// OncePerRequestFilter https://blog.csdn.net/weixin_43702146/article/details/120056226  https://cloud.tencent.com/developer/article/1497822

public class JwtAuthenticationTokenFilter extends OncePerRequestFilter {

    @Value("${jwt.tokenHeader}")
    private String tokenHeader;
    @Value("${jwt.tokenHead}")
    private String tokenHead;

    @Resource
    private UserComDetailsService userComDetailsService;

    @Resource
    private JwtUtil jwtUtil;

    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
        System.out.println("请求方法为：" + request.getMethod());

        String authorization = request.getHeader(this.tokenHeader);
        // TODO 引入日志打印
        System.out.println("JwtAuthenticationTokenFilter--Authorization : " + authorization);

        if (authorization == null) {
            System.out.println("JwtAuthenticationTokenFilter--Authorization的确是为 null");
        }
        if (authorization != null) {
            System.out.println("JwtAuthenticationTokenFilter--Authorization 不是 null, 而是：" + authorization + "类型为: " + authorization.getClass().getTypeName());
            String username = jwtUtil.getUsernameFromToken(authorization);
            System.out.println("JwtAuthenticationTokenFilter--username: " + username);
            if (username != null && SecurityContextHolder.getContext().getAuthentication() == null) {
                // UserDetailService只单纯地负责存取用户信息，除了给框架内的其他组件提供数据外没有其他功能。而认证过程是由AuthenticationManager来完成的。
                UserDetails userDetails = userComDetailsService.loadUserByUsername(username);
                /*
                    UsernamePasswordAuthenticationToken继承AbstractAuthenticationToken实现Authentication
                    所以当在页面中输入用户名和密码之后首先会进入到UsernamePasswordAuthenticationToken验证(Authentication)，
                    然后生成的Authentication会被交由AuthenticationManager来进行管理
                    而AuthenticationManager管理一系列的AuthenticationProvider，
                    而每一个Provider都会通UserDetailsService和UserDetail来返回一个
                    以UsernamePasswordAuthenticationToken实现的带用户名和密码以及权限的Authentication
                */
                UsernamePasswordAuthenticationToken authenticationToken = new UsernamePasswordAuthenticationToken(userDetails, null, userDetails.getAuthorities());
                authenticationToken.setDetails(new WebAuthenticationDetailsSource().buildDetails(request)); // 当希望创建新的身份验证详细实列时，由该类调用
                SecurityContextHolder.getContext().setAuthentication(authenticationToken);
            }
        }
        filterChain.doFilter(request, response);
    }
}

预检请求时 axios不会经过请求拦截器，所以Authorization字段正常为 null
但是当 真正的登录操作时，请求会经过拦截器，而拦截器中直接这样写

config.headers.Authorization = localStorage.getItem('token')；

，所以当 token 为 null 时，后端获取到的就是一个为 “null” 的字符串，而不是空值。
前端应该对 token 进行判空 （同时在登录操作之前应该清除 token）

改写如下：

let authorization = localStorage.getItem('token');
	// 后端根据 authorization 是否为空判断是否需要授权，如果传过去的为 null，则 null 会被解析成一个字符串，而不是null
	if (authorization !== null) {
		config.headers.Authorization = authorization;
	}

判断后