Angular 无法从 Spring Boot 接收 JWT 令牌

Question

我在控制台中收到此错误：

null
dan
TypeError: Cannot read property 'token' of null
at MapSubscriber.project (basic-authentication.service.ts:29)
at MapSubscriber._next (map.js:29)
at MapSubscriber.next (Subscriber.js:49)
at MapSubscriber._next (map.js:35)
at MapSubscriber.next (Subscriber.js:49)
at FilterSubscriber._next (filter.js:33)
at FilterSubscriber.next (Subscriber.js:49)
at MergeMapSubscriber.notifyNext (mergeMap.js:69)
at InnerSubscriber._next (InnerSubscriber.js:11)
at InnerSubscriber.next (Subscriber.js:49)

我正在尝试从 Angular 7 前端对用户进行身份验证。当我使用 Postman 进行测试时，它适用于所有请求（即使使用 JWT 令牌）。

我在 intelliJ 上启用调试器的情况下再次运行登录操作，并且 JWT 已正确创建并发送，但它在 Angular 前端应用程序上似乎为空。

***请注意，我可能在 Spring 中处于中间状态，但在 Angular 中确实是新手

这是我的 Angular 代码被调用：

    executeJWTAuthenticationService(username, password) {
    return this.http.post<any>(
      `${API_URL}/login`, {
        username,
        password
      }).pipe(
        map(
          data => {
            console.log(data);
            console.log(username);
            sessionStorage.setItem(AUTHENTICATED_USER, username);
            sessionStorage.setItem(TOKEN, `Bearer ${data.token}`);
            return data;
          }
        )
      );
  }

这是我的 JwtAuthenticationFilter：

    public class JwtAuthenticationFilter extends UsernamePasswordAuthenticationFilter {
    private AuthenticationManager authenticationManager;

    public JwtAuthenticationFilter(AuthenticationManager authenticationManager) {
        this.authenticationManager = authenticationManager;
    }

    /* Trigger when we issue POST request to /login
    We also need to pass in {"username":"dan", "password":"dan123"} in the request body
     */
    @Override
    public Authentication attemptAuthentication(HttpServletRequest request, HttpServletResponse response) throws AuthenticationException {

        // Grab credentials and map them to login viewmodel
        LoginViewModel credentials = null;
        try {
            credentials = new ObjectMapper().readValue(request.getInputStream(), LoginViewModel.class);
        } catch (IOException e) {
            e.printStackTrace();
        }

        // Create login token
        UsernamePasswordAuthenticationToken authenticationToken = new UsernamePasswordAuthenticationToken(
                credentials.getUsername(),
                credentials.getPassword(),
                new ArrayList<>());

        // Authenticate user
        Authentication auth = authenticationManager.authenticate(authenticationToken);

        return auth;
    }

    @Override
    protected void successfulAuthentication(HttpServletRequest request, HttpServletResponse response, FilterChain chain, Authentication authResult) throws IOException, ServletException {
        // Grab principal
        UserPrincipal principal = (UserPrincipal) authResult.getPrincipal();

        // Create JWT Token
        String token = JWT.create()
                .withSubject(principal.getUsername())
                .withExpiresAt(new Date(System.currentTimeMillis() + JwtProperties.EXPIRATION_TIME))
                .sign(HMAC512(JwtProperties.SECRET.getBytes()));

        // Add token in response
        response.addHeader(JwtProperties.HEADER_STRING, JwtProperties.TOKEN_PREFIX + token);
    }
}

Answer 1

只需尝试在您的角度 http 调用中观察响应。 然后您将能够从响应标头中读取 JWT 令牌。

executeJWTAuthenticationService(username, password) {
    return this.http.post<any>(
        `${API_URL}/login`, {
            username,
            password
        }, {observe: 'response'}).pipe(
        map(
            data => {
                const token = data.headers.get("Authorization");
                console.log(data);
                console.log(username);
                sessionStorage.setItem(AUTHENTICATED_USER, username);
                sessionStorage.setItem(TOKEN, `Bearer ${token}`);
                return data;
            }
        )
    );
}