JWT подключение от angular проекта к Jhipster

Question

У меня есть angular базовый c проект и простой микросервисный проект jhipster. Так как я выбрал опцию jwt в своем проекте jhipster, я хочу использовать методы из моего angular проекта. После долгих часов поиска я нашел этот код, который помог мне успешно подключиться, но я получил странную ошибку, которая меня заблокировала. Вот мои angular классы, которые я использовал для подключения и использования методов jhipster:

файл 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.spe c .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)

Ребята, если вы знаете какой-либо простой способ подключения к jhipster с помощью jwt из angular, пожалуйста, помогите мне, потому что я заблокирован здесь, у меня есть полный проект jhipster, который я не могу потреблять ..

Answer 1

Ну, похоже, ваш сервер не предоставляет authorities в ответе JWT. Поскольку данные отсутствуют, saveAuthorities сохраняет строку "undefined", которая не может быть обработана позже.

Если причина authorities отсутствует в том, что вы слепо скопировали некоторый случайный код из целого rnet, удалите authorities из class JwtResponse и saveAuthorities, getAuthorities и все ссылки на них.

В противном случае просто укажите authorities в своем ответе.

Или вы можете проверьте, существуют ли права доступа при сохранении их в onSubmit обратном вызове.

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

Answer 2

В вашем состоянии опечатка в методе getAuthorities. Маркер не определен. Ошибка, возникающая при попытке разобрать undefined в JSON.parse(...). Вы проверяете 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 => {