处理多个重定向 angular 路由

Question

基本上，我们有两条路线：

/homepage
'/user/oldLogin'

以前，如果没有用于匹配的路由，那么用户将被重定向到 /homepage，如果用户试图在没有登录的情况下访问受保护的路由，那么他将被重定向到 /user/oldLogin。

现在，我想要的是一条新路线 /user/Login 来处理路线 /homepage 和路线 /user/oldLogin 的目的。所以对于所有路由，如果用户未通过身份验证，他应该被重定向到 /user/login.

这是我的代码：

    { path: '', redirectTo: 'hompage', pathMatch: 'full'},
  //redirect from hompage to login
  { path: '/homepage', redirectTo: '/user/oldLogin', pathMatch: 'full'},
  //redirect login to real login
  { path: 'user/oldLogin', redirectTo: '/user/login', pathMatch: 'full'},
  //note that redirects will always be on top
  { path: 'hompage', component: LandingComponent },

但是发生了一次重定向。如果用户在任何不匹配的路由上，那么他将被重定向到 \homepage 。如果用户在 /homepage 上，那么他将被重定向到 /user/oldLogin 。如果用户在 /user/oldLogin，那么他只会被重定向到 \user\login。

我是不是做错了什么？

Answer 1

根据您发布的路线，当前路线是预期的行为。变化
{ path: '', redirectTo: 'hompage', pathMatch: 'full'}, 至 { path: '', redirectTo: '/user/login', pathMatch: 'full'}
这会将不匹配的路由重定向到新登录。要将未经授权的路由重定向到登录，请使用 authGuard。如果 authGuard 检查失败，则用户未授权，您可以重定向到 authGuard 本身登录。

Answer 2

您可以在 angular 中使用 auth guard。守卫用于保护授权路线。 canActivate()方法用于校验授权，当returnstrue时，授权成功

auth.guard.ts

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, Router, RouterStateSnapshot } from '@angular/router';
import { AuthenticationService } from '../../../services/authentication.service';

@Injectable()
export class AuthGuardService implements CanActivate {

  constructor(private router: Router, private authentication: AuthenticationService) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (this.authentication.isLoggedIn()) {
      return true;
    }

    this.router.navigate(['login'], {
      queryParams: {
        return: state.url
      }
    });
    return false;
  }

  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (this.authentication.isLoggedIn()) {
      return true;
    }

    this.router.navigate(['login'], {
      queryParams: {
        return: state.url
      }
    });
    return false;
  }



}

app.module.ts

在你的模块供应商中导入守卫服务

providers: ["AuthGuardService"]

routing.module.ts

{ path: 'yourpath', component: YourComponent, CanActivate: [AuthGuardService] }

处理多个重定向 angular 路由

Handle multiple redirects angular route

typescript

angular

angular-router