Angular - 从辅助路由刷新浏览器时如何始终登陆起始页

Question

我有一个简单的场景。我的应用程序以默认组件开始，比方说 StartComponent，它是通过 Angular 路由器使用名为 start 的路由到达的。所以在浏览器栏中我看到类似 myhost/start 的内容。

当我导航到名为 second 的路由时，应用程序的逻辑将我带到第二个组件 SecondComponent，因此在浏览器栏中我看到了 我的主机/秒。

如果现在我刷新浏览器，例如通过 Command-R 或 Ctrl-F5，我再次登陆 SecondComponent。

不过，我希望看到的是浏览器的刷新将我再次带到 StartComponent，而不管我从哪里进行刷新。

实现此行为的最简洁方法是什么？

Answer 1

这与用户未登录时重定向到登录的策略基本相同。您可以使用 CanActivate 执行路由器重定向，但不会阻止路由更改(即它总是解析为 true)。

@Injectable()
export class CanActivateStart implements CanActivate {
    public constructor(private _router: Router) {

    }

    public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        if(!(route.component instanceof StartComponent)) {
           this._router.navigateByUrl('/start'); 
        }
        return true;
    }

}

总是返回 true 可能看起来很奇怪，但是如果你返回 false 它会取消路由更改，同时阻止 navigateByUrl().

把它放在路由器配置的顶层，它只会被执行一次。当浏览器刷新时，它会触发重定向。

const routes = [
     {
        canActivate: [CanActivateStart],
        children: [
           // the routes you want to force a redirect
        ]
     }, {....}
]