Angular 应用程序中访问令牌的处理答案

【问题标题】：Handling of Access token in Angular applicationAngular 应用程序中访问令牌的处理
【发布时间】：2019-02-26 13:48:50
【问题描述】：

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

我正在从 app.component.ts 调用令牌休息 API 以获取访问令牌。将其设置为可观察对象，以便我可以在拦截器中获取访问令牌，以在其余 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 的 Children 组件开始渲染。子组件包括 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没有收到access token，导致rest API失败并返回401状态码。我理解 app 组件的子组件不会等待执行 app.component.ts 的 init() 函数的原因

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

BehaviorSubject 主题是否适合存储令牌值？

我们可以在收到令牌之前停止子组件的渲染吗？

提前致谢。

【问题讨论】：

标签： angular typescript

【解决方案1】：

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

第二种选择（在我看来更好）是将一个函数注册为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>，指示令牌是否已加载且有效。

【讨论】：