我有两条需要 Angular 的路线canActivate: [AuthGuard]
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{
path: 'projects',
children: [
{ path: '', component: ProjectsComponent , canActivate: [AuthGuard] },
{ path: 'sjcl', component: HashgenComponent, canActivate: [AuthGuard] },
]
},
{ path: 'login', component: LoginComponent },
{ path: '**', redirectTo: '/home', pathMatch: 'full' }
];
如您所见,如果用户未登录,他将被重定向到/login
我的路由AuthGuard
if (this.auth.isLoggedIn) { return true; }
return this.auth.currentUserObservable.pipe(
take(1),
map(user => {
console.log('user: ', user);
return !!user
}),
tap(loggedIn => {
console.log("loggedIn: ", loggedIn);
if (!loggedIn) {
console.log("access denied");
//this.router.navigate(['/login']);
this.router.navigate(['login'], { queryParams: { returnUrl: state.url } });
}
})
);
我的login
组件如下,
import { Component, OnInit } from '@angular/core';
import { AuthService } from 'src/app/services/auth.service';
import { AngularFireAuth } from '@angular/fire/auth';
import { FirebaseUISignInSuccessWithAuthResult, FirebaseUISignInFailure } from 'firebaseui-angular';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
returnUrl: string;
constructor(
public auth: AuthService,
private router: Router,
private route: ActivatedRoute,
public afAuth: AngularFireAuth) {
this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
console.log("yes i am here");
console.log(this.returnUrl);
}
ngOnInit() {}
ngAfterViewInit(){
}
successCallback(signInSuccessData: FirebaseUISignInSuccessWithAuthResult) {
console.log("Logged in!"+this.returnUrl);
this.router.navigateByUrl(this.returnUrl);
}
errorCallback(errorData: FirebaseUISignInFailure) {
console.log("Login failure!");
}
}
PROBLEM
现在,除了一件事之外,一切都运行良好。认为
- 我从开始
/home
并单击/projects
并登录,登录后我被重定向到/projects
。(这里没问题) - 我从开始
/home
并单击/projects/sjcl
并登录,登录后我被重定向到/projects/sjcl
。(这里没问题) - 我从单击开始
/home
,/projects
然后单击/projects/sjcl
并登录,登录后我被重定向到/projects
,而我应该被重定向到/projects/sjcl
(这里的问题)
事情是,
this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
console.log("yes i am here");
console.log(this.returnUrl);
如果 LoginComponent 已经加载并从另一个Authguard
. 我尝试使用不同的生命周期,甚至将它放在构造函数上仍然没有帮助。
每次加载 LoginComponent 时应该如何调用上面的代码片段?