Question

我对未经身份验证/匿名的用户使用带有访问令牌的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的访问令牌，因为该rest API失败并显示401状态代码。我了解应用程序组件的子组件不会等待执行app.component.ts的init（）函数的原因

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

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

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

谢谢。

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>，指示令牌是否已加载并有效。

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

1 个答案: