Angular 6 授权答案

【问题标题】：Angular 6 authorizationAngular 6 授权
【发布时间】：2019-03-10 13:12:39
【问题描述】：

如果用户未登录并尝试访问任何安全 URL，则不应允许他访问，并且必须重定向到登录页面，即使它是通过浏览器的 URL 栏直接访问。

我在here 上找到了一个解决方案，它解决了我的问题，但唯一的问题是，每当用户尝试从浏览器的 URL 栏访问授权 URL 时，它都会呈现 index.html 和导航栏组件的内容。

【问题讨论】：

您是否尝试过在您的路线中使用canActivate？您提供的参考答案中的选项 2。
是的，我尝试了选项 2，它运行良好，但问题是如果用户尝试通过点击浏览器的 URL 栏访问它，它会在 1 到 2 秒内呈现应用程序组件内容，然后它会自动重定向到登录页面。所以我担心的是，如果用户未登录，我不想显示应用组件页面
检查用户是否登录并使用*ngIf渲染组件的其余部分

【解决方案1】：

你应该试试 canActivate。它将识别用户登录并基于启用路由。下面是例子。为下面创建 ts 文件。

import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable()
export class UserAuthorised implements CanActivate {

   constructor(private router: Router) { }

   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
      if (your condition here of if login true) {
         return true;
      } else {
         //redirect to login page.
         this.router.navigate(['/login']);
         return false;
      }
   }
}

将上述条目添加到 app.module.ts 文件中的提供者列表中。现在，您需要在路由文件中提供此类参考。

{ path: 'dashboard', component: DashboardComponent, canActivate: [UserAuthorised] },

上面会做什么：如果用户尝试直接访问 url，路由将返回 false 并将用户重定向到登录页面。

【讨论】：

我已经这样做了，但是如果用户尝试通过 URL 访问它会呈现应用程序组件并在 1 到 2 秒后重定向到登录。如果用户未登录，如何防止应用组件呈现？
我认为你在这里误解了概念。应用程序组件将在任何情况下作为其根组件加载。 AppComponent 参考在诸如之类的索引文件中给出。您必须根据路由加载其他组件。
Appcomponent 引用在索引文件中给出，但每当路由更改时，它不会每次都调用 app 组件。应用组件将加载一次或直到页面刷新
正确。正如您所描述的“如果用户通过 URL 尝试”。这将重新加载页面并呈现应用程序组件。
谢谢@Shabbir。你的最后一句话是我的解决方案。我在 App 组件的 ngOnIt 方法中检查了用户是否登录，并基于将 ngIf 条件放在 html 端，因此它不会显示任何内容，并在 2 秒后通过显示空白页面自动重定向。