检查用户是否登录Angular 2中的任何页面更改

Question

Angular2慢慢但肯定地进步.现在我遇到了以下挑战.我想检查用户是否在每次页面更改时登录(换句话说,在每个组件的加载时).当然,我可以在每一个中实现OnInit接口,但这就是代码味道.

是否有任何有效的方法来执行应用程序的每个页面上所需的任何内容？我很想听听有关如何处理此任务的最佳实践的任何其他建议.

我正在使用这个库(https://auth0.com/blog/2015/11/10/introducing-angular2-jwt-a-library-for-angular2-authentication/)进行基于jwt的登录,我已经有了很好的服务封装所有与身份验证相关的功能的类.因此,实际检查用户登录的位置已经完成并经过测试.

谢谢,

Answer 1

如果您使用路由(并且似乎是这样的,因为您说:"每次更改页面"),您可以利用以下几点:

• 创建一个自定义路由器出口(子类RouterOutlet),用于检查身份验证及其activate方法.在这种情况下,您可以拥有全球性的东西.像这样的东西:

  @Directive({
    selector: 'auth-outlet'
  })
  export class AuthOutlet extends RouterOutlet {
    (...)
  
    activate(oldInstruction: ComponentInstruction) {
      var url = this.parentRouter.lastNavigationAttempt;
      if (isAuthenticated()) {
        return super.activate(oldInstruction);
      } else {
        (...)
      }
    }
  }
  

  有关详细信息,请参阅此问题:

  • Angular 2使用子路由进行身份验证

• 利用CanActivate装饰器来检查是否可以激活组件.在您的情况下,您可以在此级别执行身份验证检查.

• 也可以在RouterLink级别完成某些操作来显示/隐藏路由链接.在这种情况下,您可以根据相关路由配置和当前用户提示在这些链接上应用角色.有关详细信息,请参阅此问题:

  • Angular2.如何在检查访问后隐藏(无渲染)菜单中的链接？

这也可以在HTTP拦截器(扩展该拦截器的类Http)中处理.在这种情况下,当执行请求时,您可以插入一些身份验证检查:

@Injectable()
export class CustomHttp extends Http {
  constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) {
    super(backend, defaultOptions);
  }

  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
    console.log('request...');
    if (isAuthenticated()) {
      return super.request(url, options).catch(res => {
        // do something
      });        
    } else {
      // Redirect to login page
      // Or throw an exception: return Observable.throw(new Error(...));
    }
  }

  (...)
}

有关详细信息,请参阅此问题:

• 如何在Angular2中创建拦截器？