Angular 路由的条件答案

【问题标题】：condition on Angular routingAngular 路由的条件
【发布时间】：2019-05-09 01:05:45
【问题描述】：

首先，如果第一个用户已经在第一个选项卡中登录并且它将重定向到仪表板，当第一个用户在同一浏览器中打开第二个选项卡（粘贴登录 URL）时，它会自动重定向到仪表板而不进入登录页面。我有条件在登录页面中，未经身份验证的用户可以访问的特定路由，

login.component.ts

linkToMarket(): void {
    this.sidenav.close().then(() => {
        this.router.navigate([UrlConstants.Market]);
    });
}

在市场页面（在第二个选项卡中），用户可以返回登录页面，但不幸的是它会通过仪表板重定向（因为第一个用户已经登录），因为我实现了这个[如果用户登录则重定向到仪表板] [ 1]，如何确定第二个标签是否有不同的用户，当从市场页面返回时，它不会重定向到仪表板而是登录页面，我是否可以在路由上设置条件或使用Authguard （可以激活）？

detail.login 组件

ngOnInit(): void {
    if (this.authenService.isUserAuthenticated()) {
        this.router.navigate([UrlConstants.UserSetting])
    }
}

market.component.ts

linkToSignIn(): void {
    this.router.navigate([UrlConstants.Login], { queryParams: { returnUrl: UrlConstants.Market } });
    if (this.authenService.isUserAuthenticated()) {
        this.router.navigate([UrlConstants.Login])
    }
}


[1]: https://stackoverflow.com/questions/44121164/angular-2-redirect-if-user-is-logged-in

【问题讨论】：

不同的用户？您必须维护某种前端会话、cookie、localStorage 等。如果它是不同的用户，那么显然第一个用户的会话被破坏了。你怎么知道它是不同的用户？
Angular 应用程序在单个用户的浏览器中运行。您是说您有多个用户使用一台计算机/浏览器吗？还是您指的是不同计算机上的不同用户？

标签： angular typescript angular6 angular-router-guards

【解决方案1】：

我不明白您问题中的 first 和 second 用户。

但一般来说，为了保护某些需要登录的路由，请使用路由保护。路由守卫的主要目的之一是确保某人不会访问路由，除非他们满足特定条件（例如登录）。

这是我的一个身份验证守卫的示例：

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

import { Observable } from 'rxjs';

import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate, CanLoad {

  constructor(private authService: AuthService,
              private router: Router) { }

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this.checkLoggedIn(state.url);
  }

  checkLoggedIn(url: string): boolean {
    if (this.authService.isLoggedIn) {
      return true;
    }

    // Retain the attempted URL for redirection
    this.authService.redirectUrl = url;
    this.router.navigate(['/login']);
    return false;
  }

}

然后您将警卫附加到路由配置中的路由：

  {
    path: 'products',
    loadChildren: './products/product.module#ProductModule',
    canActivate: [AuthGuard],
    data: { preload: false },
  },

这是你要问的吗？

【讨论】：