Angular,用户在登录时进行身份验证但未路由到仪表板。删除 AuthGuard 有效
Angular, User authenticates on Login but does not route to dashboard. Removing AuthGuard works
我是 angular 的新手,如果用户通过身份验证,我会花大约 2 到 3 个小时在线尝试从登录导航到仪表板。如果我不使用 canActivate: [AuthGuard],我可以路由到仪表板。但是,一旦我添加 canActivate: [AuthGuard] 我就会卡在登录页面上(尽管我在 firebase 控制台上看到用户登录)。它只是没有将我导航到仪表板页面
我的代码..
app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { AuthGuard } from './shared/guard/auth.guard';
//import { SecureInnerPagesGuard } from "./shared/guard/secure-inner-pages.guard.ts.guard";
//import { HomeComponent } from './components/home/home.component';
import { SignInComponent } from './components/sign-in/sign-in.component';
import { from } from 'rxjs';
const routes: Routes = [
{ path: '', redirectTo: '/sign-in', pathMatch: 'full'},
{ path: 'sign-in',component: SignInComponent},
{ path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from '../../auth/auth.service';
import { Router } from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(
public authService: AuthService,
public router: Router
){ }
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
if(this.authService.isLoggedIn !== true) {
this.router.navigate(['sign-in']);
}
return true;
}
}
我还在 app.module.ts 的提供商中添加了 [AuthGuard]
任何帮助将不胜感激
看起来你的 if(this.authService.isLoggedIn !== true) 条件 returns 为真,你的应用程序导航到路线 sign-in
。登录成功后检查 this.authService.isLoggedIn
是否为真。
你也不需要 if(this.authService.isLoggedIn !== true)
你可以只使用 if(!this.authService.isLoggedIn)
.
我是 angular 的新手,如果用户通过身份验证,我会花大约 2 到 3 个小时在线尝试从登录导航到仪表板。如果我不使用 canActivate: [AuthGuard],我可以路由到仪表板。但是,一旦我添加 canActivate: [AuthGuard] 我就会卡在登录页面上(尽管我在 firebase 控制台上看到用户登录)。它只是没有将我导航到仪表板页面
我的代码..
app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { AuthGuard } from './shared/guard/auth.guard';
//import { SecureInnerPagesGuard } from "./shared/guard/secure-inner-pages.guard.ts.guard";
//import { HomeComponent } from './components/home/home.component';
import { SignInComponent } from './components/sign-in/sign-in.component';
import { from } from 'rxjs';
const routes: Routes = [
{ path: '', redirectTo: '/sign-in', pathMatch: 'full'},
{ path: 'sign-in',component: SignInComponent},
{ path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from '../../auth/auth.service';
import { Router } from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(
public authService: AuthService,
public router: Router
){ }
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
if(this.authService.isLoggedIn !== true) {
this.router.navigate(['sign-in']);
}
return true;
}
}
我还在 app.module.ts 的提供商中添加了 [AuthGuard] 任何帮助将不胜感激
看起来你的 if(this.authService.isLoggedIn !== true) 条件 returns 为真,你的应用程序导航到路线 sign-in
。登录成功后检查 this.authService.isLoggedIn
是否为真。
你也不需要 if(this.authService.isLoggedIn !== true)
你可以只使用 if(!this.authService.isLoggedIn)
.