时间戳

首页 > 解决方案 > 从 Angular 项目到 jhipster 的 jwt 连接

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

问题描述

我有一个 Angular 基础项目和一个简单的微服务 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 }
];

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

令牌存储.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)

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

标签： javaangularjhipster

解决方案

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

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

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

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

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

推荐阅读