Angular 角度应用中访问令牌的处理

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

我正在从app.component.ts调用令牌rest API以获取访问令牌。将其设置为observable对象，以便我可以在拦截器中获取访问令牌，以便在RESTAPI调用的请求头中添加令牌。 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;
}
}

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

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)….
}
}

导出类reachhtpinterceptor实现HttpInterceptor{
截取（req:HttpRequest，next:HttpHandler）：可观察{
const token=getToken（）；
让authReq=req.clone（）；
常量承载器=‘承载器’+令牌；
authReq=req.clone（{headers:req.headers.set（'Authorization'，bearer）}）；
返回next.handle（authReq）…。
}
}

当子组件访问rest API以获取数据时，不会从app.component.ts接收访问令牌，因为rest API失败，状态代码为401。 我理解app component的子组件不会等待执行app.component.ts的init（）函数的原因

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

请让我知道什么地方最好有令牌API调用代码

Behavior subject subject是否适合存储令牌值

在收到令牌之前，是否可以停止子组件的渲染

---

提前感谢。

这里有两个选项，第一个选项是使用路由器防护，它实现了

CanActivate

接口，并将该防护用于根url

第二种选择（我认为这是更好的选择）是将函数注册为

APP\u 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

，指示令牌是否已加载且有效