Angular:路由重定向问题
Angular: Routing Redirect Issue
我在 angular 中使用路由器根据 he/she 是否登录以及他们当前的 URL 重定向用户:
下面你可以看到来自我的应用程序路由模块的路由:
const routes: Routes = [
{ path: 'home', component: HomeComponent, canActivate: [RouteGuardService] },
{ path: 'login', component: LoginComponent},
{ path: '', redirectTo: 'login', pathMatch: 'full'}, // redirects to '' exists hence keep this in mind when redirecting
{ path: '**', redirectTo: 'home' },
];
在用户未登录但试图访问“/home”目录的情况下he/she被重定向到“/login”。我用来实现这个的代码是。
if (accessGranted){
return true;
} else {
// tell router to navigate to login pag
this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
return false;
}
此代码基本有效,但仍然存在一个错误:如果我尝试在未登录的情况下访问主页,我首先会被重定向到“/”,只有在我刷新时才会被重定向到登录。我真的不明白为什么会这样,很想解决这个问题。
此致,
山姆
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router) {}
canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
if (!this.authService.isLoggedIn) {
return this.router.parseUrl(`/login?returnUrl=${state.url}`);
} else {
return true;
}
}
}
我在 angular 中使用路由器根据 he/she 是否登录以及他们当前的 URL 重定向用户: 下面你可以看到来自我的应用程序路由模块的路由:
const routes: Routes = [
{ path: 'home', component: HomeComponent, canActivate: [RouteGuardService] },
{ path: 'login', component: LoginComponent},
{ path: '', redirectTo: 'login', pathMatch: 'full'}, // redirects to '' exists hence keep this in mind when redirecting
{ path: '**', redirectTo: 'home' },
];
在用户未登录但试图访问“/home”目录的情况下he/she被重定向到“/login”。我用来实现这个的代码是。
if (accessGranted){
return true;
} else {
// tell router to navigate to login pag
this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
return false;
}
此代码基本有效,但仍然存在一个错误:如果我尝试在未登录的情况下访问主页,我首先会被重定向到“/”,只有在我刷新时才会被重定向到登录。我真的不明白为什么会这样,很想解决这个问题。
此致, 山姆
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router) {}
canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
if (!this.authService.isLoggedIn) {
return this.router.parseUrl(`/login?returnUrl=${state.url}`);
} else {
return true;
}
}
}