在 Angular 应用程序中处理访问令牌

Question

我正在使用带有未经身份验证/匿名用户的访问令牌的 angular 5 版本。 我有一些问题要以角度处理令牌问题。

我正在从 app.component.ts 调用令牌 rest API 以获取访问令牌。 将其设置为可观察对象，以便我可以在拦截器中获取访问令牌，以在 rest API 调用的请求标头中添加令牌。 App.component.ts

export class AppComponent implements OnInit {
ngOnInit() {
this.tokenService.generateAccessToken().subscribe(
(data: any) => {
this.tokenService.setAccesToken(data.access_token);
} );
}
}

Token.service.ts

@Injectable()
export class UserService {
public bearerToken = new BehaviorSubject<string>(this.defautToken);
public currentBearerToken = this.bearerToken.asObservable();
public setAccesToken(accessToken: string){
this.bearerToken.next(accessToken);
}
Public getAccessToken () {
Return ….
}
public generateAccessToken() {
......
return token;
}
}

当我们在浏览器中启动/加载应用程序时，app.component 的子组件开始渲染。 子组件包括 Appabr、侧边栏、正文、页脚组件。子组件还具有其余调用来获取用于在屏幕上呈现的数据。

export class ChildComponent implements OnInit {
public ngOnInit() {
getdata() //rest call
}
}

我们有拦截器，它在请求标头中添加访问令牌。

export class ReachHttpInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const token = getToken();
let authReq = req.clone();
const bearer = 'Bearer ' + token;
authReq = req.clone({ headers: req.headers.set('Authorization', bearer) });
return next.handle(authReq)….
}
}

当子组件访问 rest API 以获取数据时，不会从 app.component.ts 收到访问令牌，因为 rest API 失败并显示 401 状态代码。 我理解应用程序组件的子组件不会等待执行 app.component.ts 的 init() 函数的原因

请让我知道拥有令牌 API 调用代码的最佳位置是什么？

行为主体是否适合存储令牌值？

我们可以阻止子组件渲染直到我们收到令牌吗？

提前谢谢。

Answer 1

您在这里有两个选择，第一个选项是使用实现CanActivate接口的路由器防护，并将该防护用于您的根 URL。

第二种选择(在我看来是更好的一种)是注册一个函数作为APP_INITIALIZER从 API 加载令牌。

例如：

export function loadToken(userService: UserService)
{
return this.userService.loadAccessToken$().asPromise();
}
// ... inside app module
providers: [
{ provide: APP_INITIALIZER, useFactory: loadToken, deps: [UserService], multi: true },
]

loadAccessToken$将从 API 获取访问令牌，更新accessToken主题并返回指示令牌是否已加载且有效的Observable<boolean>。