# #javascript #angular #firebase-authentication #angular-ui-router #auth-guard
#язык JavaScript #угловой #firebase-аутентификация #угловой-пользовательский интерфейс-маршрутизатор #авто-охранник
Вопрос:
Если я обновлю страницу при входе в систему, Охранник перенаправит меня на страницу входа в систему. Есть ли способ перенаправления на страницу входа только в том случае, если пользователь действительно вышел из системы? Я использую интерфейс как угловой (версия: 12.2.13), а серверную часть как firebase.
auth.guard.ts
import { Injectable } from "@angular/core"; import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from "@angular/router"; import { AuthService } from "./auth.service"; @Injectable() export class AuthGuard implements CanActivate { constructor(private authService: AuthService, private router: Router){} canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){ if(this.authService.isAuth()){ return true; } else { this.router.navigate(['/auth']); } } }
Комментарии:
1. Пожалуйста, поделитесь своим кодом защиты и импортируйте код защиты
2. вы создали какую-нибудь охрану? если да, то, пожалуйста, поделитесь своим кодом
3. что
this.authService.isAuth()
возвращается?
Ответ №1:
Когда пользователь вошел в приложение, статус пользователя должен быть сохранен в sessionStorage или Redux.Затем необходимо определить службу AuthGuard.Наконец, AuthGuard должен быть добавлен к каждому маршруту.
@Injectable({ providedIn: 'root' }) export class AuthGuard implements CanActivate { constructor(private router: Router) {} canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { const userLoginStatus = sessionStorage.getItem("userLogin"); const IsUserLogin: boolean | null = userLoginStatus ? JSON.parse(userLoginStatus) : null; if ( IsUserLogin ) { return true } else { this.router.navigateByUrl("/"); return false } } }
Ответ №2:
Маршруты с домашним маршрутом, защищенным AuthGuard
import { Routes, RouterModule } from '@angular/router'; import { LoginComponent } from './login/index'; import { HomeComponent } from './home/index'; import { AuthGuard } from './_guards/index'; const appRoutes: Routes = [ { path: 'login', component: LoginComponent }, // home route protected by auth guard { path: '', component: HomeComponent, canActivate: [AuthGuard] }, // otherwise redirect to home { path: '**', redirectTo: '' } ]; export const routing = RouterModule.forRoot(appRoutes);
AuthGuard перенаправляет на страницу входа в систему, если пользователь не вошел в систему
import { Injectable } from '@angular/core'; import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; @Injectable() export class AuthGuard implements CanActivate { constructor(private router: Router) { } canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { if (localStorage.getItem('currentUser')) { // logged in so return true return true; } // not logged in so redirect to login page with the return url this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }}); return false; } }