是否可以停用角度路由中的两个相同路径(因此一次只能激活一个)

Question

是否可以使用仅在Angular 9中重定向的Guards停用2个相同的路径？我试过了，但当LogoutGuard返回false时，第一个仍然有效：

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

在本例中，LogoutRouter返回false和LoginRoutertrue

因此，发生的情况如下：

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或要导航到的url，而不是直接返回true或false。

login.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