Question

我有一个Angular 6应用，该应用使用提供者信息来确定该应用的功能（渠道）。我正在使用用户登录后从服务器收到的对象，该对象为我提供了各个通道的布尔值。

providerInfos = {
  channels: {
    a: true,
    b: true,
    c: true
  }
}

在index.html中，我有

<base href="/home/">

并且在我的应用程序路由模块中

const routes: Routes = [
  { path: '', redirectTo: 'a', pathMatch: 'full' }, // Set /a as "start page".
  { path: 'a', component: AComponent, runGuardsAndResolvers: 'always' },
  { path: 'a/:id', component: ADetailsComponent },
  { path: 'b', component: BComponent },
  { path: 'c', component: CComponent }
];

因此，在初始化应用程序时，将加载A（somewhere.io/home/a）。到目前为止，这还不错，但是由于该应用程序的进一步开发，事实证明也不能将A用作通道。这给我带来了一个问题，但我还无法解决。我越想和看我的代码，就越觉得我以前的方法基本上是错误的。

在初始化应用程序时，如果A不是应用程序功能的一部分，我希望能够将B或C显示为第一个或唯一视图（somewhere.io/home/whatever）。原则上，我想至少通过

根据通过其提供者信息为用户定义的功能为应用程序提供路由

path: '', redirectTo: 'whatever', pathMatch: 'full'

如果仅给出一种功能。

我可以通过提供者信息来自定义功能，以便侧边栏中的菜单得到自定义，并且如果有人想在URL中输入路径，则可以使* ngIf无法访问不属于该功能的组件。酒吧。但我无法相应地调整路线。

您将如何处理此问题。有最佳做法吗？

Answer 1

您可以使用路由防护器来实现此功能。路由防护不仅可以阻止用户访问路由，还可以让您返回UrlTree来告诉路由器要导航到的位置。

给出以下路线：

const routes = [
  { path: '', redirectTo: 'a', pathMatch: 'full' },
  { path: 'a', component: ComponentA, canActivate: [AuthGuard] },
  { path: 'b', component: ComponentB }
];

我可以如下设置我的AuthGuard：

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private router: Router, private userService: UserService) {
  }

  canActivate() : boolean | UrlTree {
    const user = this.userService.getCurrentUser();

    const userCanAccessA = false; // TODO: implement
    if (userCanAccessA) {
      return true;
    }

    // redirect to /b
    return this.router.parseUrl('/b');
  }
}

我不建议将此示例作为一个好的实现，我只是在演示路由防护的功能。您的要求将确定路由的结构以及重定向逻辑是什么。

诱使警卫人员做很多工作可能很诱人。相反，我会让每个警卫都专注于执行特定任务。然后，可以根据需要通过组合防护来构成防护逻辑。

请注意，在下面的演示中，永远不会构造组件A，因为AuthGuard会在路由发生之前阻止访问。

演示：https://stackblitz.com/edit/angular-gxsb3m

如何在Angular中设置用户特定的路由？

1 个答案: