Если я обновлю страницу при входе в систему, Охранник перенаправит меня на страницу входа

# #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;  } }