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

您可以成角度使用auth guard。防护用于保护授权路由。 canActivate()方法用于检查授权，返回true时授权成功

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] }

处理多个重定向角度路线

2 个答案: