从 Angular 项目到 jhipster 的 jwt 连接答案

【问题标题】：jwt connection from angular project to jhipster从 Angular 项目到 jhipster 的 jwt 连接
【发布时间】：2020-05-23 15:42:57
【问题描述】：

我有一个 Angular 基础项目和一个简单的微服务 jhipster 项目。因为我在我的 jhipster 项目中选择了 jwt 选项，所以我想使用我的 angular 项目中的方法。找了几个小时后，我终于找到了这段代码，它帮助我成功连接，但我得到了一个奇怪的错误，这让我很困惑。这是我用来尝试连接和使用 jhipster 方法的 Angular 类：

auth-interceptor.ts 文件

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

constructor(private token: TokenStorageService) { }

intercept(req: HttpRequest<any>, next: HttpHandler) {
    let authReq = req;
    const token = this.token.getToken();
    if (token != null) {
        authReq = req.clone({ headers: req.headers.set(TOKEN_HEADER_KEY, 'Bearer ' + token) });
    }
    return next.handle(authReq);
  }
 }

 export const httpInterceptorProviders = [
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
];

auth.service.ts

 const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  };



 @Injectable({
  providedIn: 'root'
  })
  export class AuthService {

      private loginUrl = 'http://localhost:8082/api/authenticate';
      private signupUrl = 'http://localhost:8080/api/auth/signup';

      constructor(private http: HttpClient) {
      }

      attemptAuth(credentials: AuthLoginInfo): Observable<JwtResponse> {
       return this.http.post<JwtResponse>(this.loginUrl, credentials, httpOptions);
        }

       signUp(info: SignUpInfo): Observable<string> {
    return this.http.post<string>(this.signupUrl, info, httpOptions);
       }
     }

jwt-response.ts

export class JwtResponse {
   accessToken: string;
   type: string;
    username: string;
   authorities: string[];
  }

token-storage.service.spec.ts

describe('TokenStorageService', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
    providers: [TokenStorageService]
   });
   });

   it('should be created', inject([TokenStorageService], (service: TokenStorageService) => {
     expect(service).toBeTruthy();
   }));
  });

token.storage.service.ts

  const TOKEN_KEY = 'AuthToken';
     const USERNAME_KEY = 'AuthUsername';
     const AUTHORITIES_KEY = 'AuthAuthorities';

     @Injectable({
  providedIn: 'root'
})
export class TokenStorageService {
  private roles: Array<string> = [];
  constructor() { }

  signOut() {
    window.sessionStorage.clear();
  }

  public saveToken(token: string) {
    window.sessionStorage.removeItem(TOKEN_KEY);
    window.sessionStorage.setItem(TOKEN_KEY, token);
  }

  public getToken(): string {
    return sessionStorage.getItem(TOKEN_KEY);
  }

  public saveUsername(username: string) {
    window.sessionStorage.removeItem(USERNAME_KEY);
    window.sessionStorage.setItem(USERNAME_KEY, username);
  }

  public getUsername(): string {
    return sessionStorage.getItem(USERNAME_KEY);
  }

  public saveAuthorities(authorities: string[]) {
    window.sessionStorage.removeItem(AUTHORITIES_KEY);
    window.sessionStorage.setItem(AUTHORITIES_KEY, JSON.stringify(authorities));
  }

  public getAuthorities(): string[] {
    this.roles = [];

    if (sessionStorage.getItem(TOKEN_KEY)) {
      JSON.parse(sessionStorage.getItem(AUTHORITIES_KEY)).forEach(authority => {
        this.roles.push(authority.authority);
      });
       }

       return this.roles;
      }
     }

最后这是我的连接方法：

onSubmit() {
    console.log(this.form);

    this.loginInfo = new AuthLoginInfo(
      this.form.username,
      this.form.password);

    this.authService.attemptAuth(this.loginInfo).subscribe(
      data => {
        this.tokenStorage.saveToken(data.accessToken);
        this.tokenStorage.saveUsername(data.username);
        this.tokenStorage.saveAuthorities(data.authorities);

        this.isLoginFailed = false;
        this.isLoggedIn = true;
        this.roles = this.tokenStorage.getAuthorities();
        this.reloadPage();
      },
      error => {
        console.log(error);
        this.errorMessage = error.error.message;
        this.isLoginFailed = true;
      }
    );
  }

有了这个，我可以成功登录，但是一旦我登录，当我尝试做其他事情时就会出现这个错误：

core.js:6014 ERROR SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)
    at TokenStorageService.getAuthorities (token-storage.service.ts:45)

如果你知道任何简单的方法来使用 jwt 从 angular 连接到 jhipster，请帮助我，因为我在这里被阻止了，我有一个完整的 jhipster 项目，我不能使用任何..

【问题讨论】：

该错误表明您的 jwt 格式错误。
你能告诉我如何解决吗
获取一个有效的、格式正确的 JWT ...？

标签： java angular jhipster

【解决方案1】：

您在getAuthorities 方法中的条件有误。令牌未定义。您遇到的错误来自尝试在JSON.parse(...) 中解析undefined。您检查了存储中的TOKEN_KEY，但读取了AUTHORITIES_KEY

您的代码：

if (sessionStorage.getItem(TOKEN_KEY)) {
  JSON.parse(sessionStorage.getItem(AUTHORITIES_KEY)).forEach(authority => {

正确代码：

if (sessionStorage.getItem(AUTHORITIES_KEY)) {
  JSON.parse(sessionStorage.getItem(AUTHORITIES_KEY)).forEach(authority => {

【讨论】：

感谢您的回复，但我改变了它，就像你说的我仍然得到同样的错误男人
尝试清除存储（DevTools -> Application -> Clear storage），您可能有一些无效数据。
哦，你在里面保存了 undefined。

【解决方案2】：

好吧，您的服务器似乎没有在 JWT 响应中提供authorities。由于数据丢失，saveAuthorities 保存了字符串"undefined"，以后无法提供。

如果authorities 丢失的原因是您从互联网上盲目复制了一些随机代码，请删除class JwtResponse 和saveAuthorities、getAuthorities 中的authorities 以及所有对它们的引用。

否则，只需在您的回复中提供authorities。

或者你可以在onSubmit回调中保存权限时检查权限是否存在。

if (data.authorities)
    this.tokenStorage.saveAuthorities(data.authorities);

【讨论】：