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的中级，但在角方面真的是新手

    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;
          }
        )
      );
  }

    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调用中观察reponse。然后您将能够从响应头中读取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;
            }
        )
    );
}