java - 从 Angular 项目到Jhipster的jwt连接

Question

我有一个有角度的基础项目和一个简单的微服务jhipster项目。因为我在jhipster项目中选择了jwt选项，所以我想使用我的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 }
];

验证服务

 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[];
  }

令牌存储服务规范

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项目，我不能使用任何项目。

Answer 1

好吧，看来您的服务器未在JWT响应中提供authorities。由于缺少数据，因此saveAuthorities保存字符串"undefined"，以后将无法提供该字符串。

如果缺少authorities的原因是您盲目地从互联网上复制了一些随机代码，请从authorities和class JwtResponse，saveAuthorities及其所有引用中删除getAuthorities。

否则，只需在响应中提供authorities。

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

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