Angular 2 - 路由保护不适用于浏览器刷新 [英] Angular 2 - Route guard not working on browser refresh
问题描述
在 app.module.ts 中定义这些路由
<预><代码>...{ path: 'mypath', 组件: MyComponent, canActivate: [RouteGuard] },{ path: '', redirectTo: '/home', pathMatch: 'full' },{ 路径:'**',重定向到:'/home'}还有这门卫服务
import { Injectable } from '@angular/core';从'@angular/router'导入{CanActivate};从 'angularfire2' 导入 { AngularFire };从 'angularfire2' 导入 { AngularFireAuth };@Injectable()导出类 RouteGuard 实现 CanActivate {私人登录:布尔值;构造函数(私有 af:AngularFire,私有 auth:AngularFireAuth){}canActivate(): 布尔 {this.auth.subscribe(auth => {if (auth) { this.loggedIn = true;}else { this.loggedIn = false;}//this.router.navigate(['/login']);以备将来实施});返回 this.loggedIn;}}
<块引用>
从应用程序转到的 url //mysite/mypath
刷新浏览器//mysite
而不是 //mysite/mypath
(并且还跳过默认路线).
没有在 mypath 路由上激活任何保护(即:{ path: 'mypath', component: MyComponent }
一切正常.
有谁知道这是否是一个 Angular 错误?我怎样才能避免这种行为?
我的开发环境是:
@angular/cli: 1.0.0-rc.1节点:7.5.0操作系统:Linux x64@angular/cli: 1.0.0-rc.1@angular/common: 2.4.9@角度/编译器:2.4.9@angular/compiler-cli: 2.4.9@角度/核心:2.4.9@angular/flex-layout: 2.0.0-rc.1@角度/表格:2.4.9@角度/http:2.4.9@角度/材料:2.0.0-beta.2@angular/平台浏览器:2.4.9@angular/platform-browser-dynamic: 2.4.9@角度/路由器:3.4.9
谢谢你帮助我.
PS:我试图在 Stack Overflow 或 Github 问题上找到答案,但没有找到答案.我看到了一个类似的问题 Angular 2 routing not working on page使用 Apache 刷新,但这不是我的情况.
你可以将结果异步发送给路由守卫:
canActivate(): Promise{让 self = this;返回 this.auth.toPromise().then(auth => {if (auth) { self.loggedIn = true;}else { self.loggedIn = false;}self.router.navigate(['/登录']);以备将来实施返回 self.loggedIn;});}
Having these routes defined in app.module.ts
...
{ path: 'mypath', component: MyComponent, canActivate: [RouteGuard] },
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: '**', redirectTo: '/home'}
and this guard service
import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { AngularFire } from 'angularfire2';
import { AngularFireAuth } from 'angularfire2';
@Injectable()
export class RouteGuard implements CanActivate {
private loggedIn: boolean;
constructor ( private af: AngularFire, private auth: AngularFireAuth ) {}
canActivate(): boolean {
this.auth.subscribe(auth => {
if (auth) { this.loggedIn = true; }
else { this.loggedIn = false; }
// this.router.navigate(['/login']); for future implememtation
});
return this.loggedIn;
}
}
refreshing the browser from url
//mysite/mypath
the app goes to//mysite
instead of//mysite/mypath
(and also skips the default route).
Without any guard activated on mypath route (ie: { path: 'mypath', component: MyComponent }
everything works perfectly.
Does anybody knows if this is an Angular bug ? How could I avoid this behaviour ?
My dev env is:
@angular/cli: 1.0.0-rc.1
node: 7.5.0
os: linux x64
@angular/cli: 1.0.0-rc.1
@angular/common: 2.4.9
@angular/compiler: 2.4.9
@angular/compiler-cli: 2.4.9
@angular/core: 2.4.9
@angular/flex-layout: 2.0.0-rc.1
@angular/forms: 2.4.9
@angular/http: 2.4.9
@angular/material: 2.0.0-beta.2
@angular/platform-browser: 2.4.9
@angular/platform-browser-dynamic: 2.4.9
@angular/router: 3.4.9
Thanks for helping me.
PS: I have tried to find an answer both on Stack Overflow or on Github issues without finding an answer. I saw a similar question Angular 2 routing not working on page refresh with Apache, but this is not my case.
you can an asynchronous result to the route guard :
canActivate(): Promise<boolean> {
let self = this;
return this.auth.toPromise().then(auth => {
if (auth) { self.loggedIn = true; }
else { self.loggedIn = false; }
self.router.navigate(['/login']); for future implememtation
return self.loggedIn;
});
}
这篇关于Angular 2 - 路由保护不适用于浏览器刷新的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!