是否可以在 Angular Routing 中停用兩條相同的路徑（因此一次只能激活一條）？

Question

是否可以使用僅在 Angular 9 中重定向的 Guards 停用 2 個相同的路徑？ 我試過了，但是當 LogoutGuard 返回 false 時，第一個仍然處於活動狀態：

  { path: '', redirectTo: 'login', pathMatch: 'full', canActivate: [LogoutGuard] },
  { path: '', redirectTo: 'home', pathMatch: 'full', canActivate: [LoginGuard] },

在這個例子中，LogoutRouter 返回false和 LoginRouter true

那么會發生以下情況：

Router Event: NavigationStart platform-browser.js:88
NavigationStart(id: 1, url: '/') platform-browser.js:79
Object { id: 1, url: "/", navigationTrigger: "imperative", restoredState: null }
platform-browser.js:79
Angular is running in the development mode. Call enableProdMode() to enable the production mode. core.js:40465
Router Event: RoutesRecognized platform-browser.js:88
RoutesRecognized(id: 1, url: '/', urlAfterRedirects: '/login', state: Route(url:'', path:'') { Route(url:'login', path:'login') { Route(url:'', path:'') }  } ) platform-browser.js:79
Object { id: 1, url: "/", urlAfterRedirects: "/login", state: {…} }
platform-browser.js:79
Router Event: GuardsCheckStart platform-browser.js:88
GuardsCheckStart(id: 1, url: '/', urlAfterRedirects: '/login', state: Route(url:'', path:'') { Route(url:'login', path:'login') { Route(url:'', path:'') }  } ) platform-browser.js:79
Object { id: 1, url: "/", urlAfterRedirects: "/login", state: {…} }
platform-browser.js:79
Router Event: ChildActivationStart platform-browser.js:88
ChildActivationStart(path: '') platform-browser.js:79
Object { snapshot: {…} }
platform-browser.js:79
Router Event: ActivationStart platform-browser.js:88
ActivationStart(path: 'login') platform-browser.js:79
Object { snapshot: {…} }
platform-browser.js:79
Router Event: GuardsCheckEnd platform-browser.js:88
GuardsCheckEnd(id: 1, url: '/', urlAfterRedirects: '/login', state: Route(url:'', path:'') { Route(url:'login', path:'login') { Route(url:'', path:'') }  } , shouldActivate: false) platform-browser.js:79
Object { id: 1, url: "/", urlAfterRedirects: "/login", state: {…}, shouldActivate: false }
platform-browser.js:79
Router Event: NavigationCancel platform-browser.js:88
NavigationCancel(id: 1, url: '/') platform-browser.js:79
Object { id: 1, url: "/", reason: "" }
platform-browser.js:79

Answer 1

你的問題

• 你總是想從 url 重定向/
• 如果用戶已登錄， /應該重定向到/home
• 如果用戶已注銷， /應重定向到/login

您的實施

您已經設置了兩條路徑相同的路由。 每個路由都有不同的redirectTo屬性和canActivate防護。 您希望檢查守衛，無論哪個返回true都會通知路由器重定向到適當的redirectTo路徑。

這依賴於 Angular 路由器以特定順序檢查特定條件，這顯然不會發生。

我的解決方案

將兩個守衛添加到一條路線。

{ path: '', component: AppComponent, canActivate: [LoginGuard, LogoutGuard] },

不是直接返回true或false ，守衛將返回true或要導航到的 url 。

登錄.guard.ts

@Injectable({
  providedIn: 'root'
})
export class LoginGuard implements CanActivate {

  constructor(private router: Router) {}

  canActivate(): boolean | UrlTree {  
    const loggedIn = true; // TODO: implement
    if (loggedIn) {
      return true;
    }

    return this.router.parseUrl('login');
  }
}

登出.guard.ts

@Injectable({
  providedIn: 'root'
})
export class LogoutGuard implements CanActivate {

  constructor(private router: Router) {}

  canActivate(): boolean | UrlTree {    
    const loggedIn = true; // TODO: implement
    if (!loggedIn) {
      return true;
    }

    return this.router.parseUrl('home');
  }
}

從這里開始的自然步驟是創建一個基本守衛，它注入了它應該允許通過的經過身份驗證的狀態和要重定向到的 url。

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