OAuth2身份验证Java Spring在Angular中出错

我已经在JavaSpring中实现了oAuth2。 当我用基本身份从邮递员那里发送请求时，我得到了响应令牌。但当我从angular发送它时，它返回401

请检查所附的代码和图片

package com.spring.rest.spring_rest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.authentication.AuthenticationManager;
import org.springframework.security.oauth2.config.annotation.configurers.ClientDetailsServiceConfigurer;
import org.springframework.security.oauth2.config.annotation.web.configuration.AuthorizationServerConfigurerAdapter;
import org.springframework.security.oauth2.config.annotation.web.configuration.EnableAuthorizationServer;
import org.springframework.security.oauth2.config.annotation.web.configurers.AuthorizationServerEndpointsConfigurer;
import org.springframework.security.oauth2.config.annotation.web.configurers.AuthorizationServerSecurityConfigurer;

@Configuration
@EnableAuthorizationServer
public class AuthorizationServerConfig extends AuthorizationServerConfigurerAdapter{

    @Autowired
    private AuthenticationManager authenticationManager;

    @Override
    public void configure(AuthorizationServerEndpointsConfigurer endpoints) throws Exception {
        //      super.configure(endpoints);
        endpoints.authenticationManager(authenticationManager);
    }

    @Override
    public void configure(AuthorizationServerSecurityConfigurer security) throws Exception {
//      super.configure(security);
        security.checkTokenAccess("isAuthenticated()");
    }

    @Override
    public void configure(ClientDetailsServiceConfigurer clients) throws Exception {
//      super.configure(clients);
        clients.inMemory().withClient("my-trusted-client")
            .authorizedGrantTypes("client_credentials","password")
            .authorities("ROLE_CLIENT","ROLE_TRUSTED_CLIENT")
            .scopes("read","write","trust")
            .resourceIds("oauth2-resource")
            .accessTokenValiditySeconds(5000)
            .secret("secret");
    }

}

角度代码： DataService.ts

login(loginPayload) {
    const headers = {
      'Authorization': 'Basic ' + btoa('my-trusted-client:secret'),
      'Content-type': 'application/json'
    }
    return this._http.post('http://localhost:8080/' + 'oauth/token', loginPayload, {headers});
  }

Login.ts

const body = new HttpParams()
      .set('username', this.f.username.value)
      .set('password', this.f.password.value)
      .set('grant_type', 'password');

    this.dataService.login(body.toString()).subscribe(data => {
      window.sessionStorage.setItem('token', JSON.stringify(data));
      console.log(window.sessionStorage.getItem('token'));
      this.router.navigate(['user-profile']);
    }, error => {
        alert(error.error.error_description)
    });

---

您可以添加控制台吗？您是否在控制台中遇到CORS问题？似乎您正在将您的

HttpParams

作为请求主体而不是URL参数传递。您应该将它们传递到

http.post（）

选项中（如

headers

），但不要将

body.toString（）

发送到您的服务，只发送

body

，因为这些选项将等待

HttpParams

对象。我认为头应该是

{headers:headers}

，而不是

{headers}

。在postman中，您发送的是用户、密码和url参数，但在ts中，您发送的是正文。您的dataService.ts应该是这样的<代码>此。_http.post（'http://localhost:8080/“+”oauth/token？gratType='+loginpayoad.grant_type+'&password='+loginpayoad.password+'&username='+loginpayoad.username，loginpayoad，{headers}）