[英]Angular2 CanActivate Navigate
I have following problem.我有以下问题。 I have made a CanActivate Guard where if you are logged in you can "go" to Debts Component.
我制作了一个 CanActivate Guard,如果您已登录,您可以“转到”债务组件。 My problem is when I am logged in and i want to redirect User to Debts Component ( because RegistrationComponent is default ), but it's not working ( actually my page is blocking.. And i cannot do anything ).
我的问题是当我登录时我想将用户重定向到债务组件(因为 RegistrationComponent 是默认的),但它不起作用(实际上我的页面被阻塞了......而且我不能做任何事情)。 My CanActivate function
我的 CanActivate 功能
export class AuthGuardService implements CanActivate {
constructor(private router: Router) { }
canActivate(): Promise<boolean>{
return checkIfAuth().then(() => {
setLoggedIn(true);
this.router.navigate(['/debts']); // <- broken :(
return true;
}).catch(() => {
setLoggedIn(false);
this.router.navigate(['/login']); // <- broken :(
return false;
})
}
}
export function checkIfAuth () {
return new Promise((resolve, reject) => {
firebase.auth().onAuthStateChanged((user) => {
if(user){
return resolve(true);
}
else{
return reject(false);
}
})
})
}
any my app.routing任何我的 app.routing
const APP_ROUTES: Routes = [
{ path: '', redirectTo: '/registration', pathMatch: 'full' },
{ path: 'registration', component: RegistrationComponent },
{ path: 'login', component: LoginComponent },
{ path: 'myaccount', component: AccountComponent, canActivate: [AuthGuardService]},
{ path: 'debts', component: DebtsComponent, canActivate: [AuthGuardService]}
];
What I did was kind of a hack but it works flawlessly :我所做的是一种黑客行为,但它完美无缺:
First, I did setup a Guard
on my LoginCompoment
route.首先,我确实在我的
LoginCompoment
路由上设置了一个Guard
。
{ path: 'login', component: LoginComponent, canActivate: [AuthGuard] }
And then I use the RouterStateSnapshot
to get a single instance of my URL state, indicating me what the user tried to reach.然后我使用
RouterStateSnapshot
获取我的 URL 状态的单个实例,指示我用户尝试访问的内容。
I can then manage the cases in the Guard :然后我可以管理 Guard 中的案例:
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
...
/**
* Protects the routes to reach with authentication
*/
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
// Set user authentication state depending on the token's existance
this.authService.setLoggedInState();
// Check user authentication state
if (this.authService.isAuthenticated) {
// Explicit navigation to '/login' while the user is already authenticated
if (state.url === '/login') {
this.router.navigate(['/dashboard']); // Debts for you
}
return true;
} else {
// Allow route to './login' to get authenticated
if (state.url === '/login') {
return true;
}
// Explicit navigation to any URL while not being authenticated
this.router.navigate(['/login']);
return false;
}
}
Documentation link about Snapshots : https://angular.io/docs/ts/latest/guide/router.html#!#sts=Snapshot:%20the%20no-observable%20alternative关于快照的文档链接: https : //angular.io/docs/ts/latest/guide/router.html#!# sts = Snapshot:% 20the% 20no-observable% 20alternative
To make it work in your case, you just have to adapt the setLoggedInState()
to your case which it seems you already have.为了使它在您的情况下工作,您只需将
setLoggedInState()
为您似乎已经拥有的情况。
NB : I call this solution a HACK because you actually set a guard on the Login
while it will still allow the user to reach it even if he is not authenticated.注意:我将此解决方案称为HACK,因为您实际上在
Login
上设置了保护,而即使用户未通过身份验证,它仍然允许用户访问它。 Still works well tho.仍然运作良好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.