Блог

Я разрабатываю приложение angular, это пример Stackblitz.

Как показано в stackblitz, я создал глобальную переменную с именем isLoggedIn, и когда пользователь войдет в систему, я изменю значение на true, иначе только false, и я смогу получить это значение по всему приложению. Но здесь мое требование заключается в том, что я хочу поставить условную маршрутизацию. Во всех компонентах я могу получить isLoggedIn логическую переменную, и я могу проверить условия. Вот моя проблема в app-routing.module.ts файле, как я могу получить эту переменную и проверить наличие условной маршрутизации.

Если пользователь вошел в систему, я хочу перенаправить на /home страницу, иначе перенаправить на ‘/ login’. Как я могу проверить это значение здесь.

   {path: 'login', component: LoginComponent}
  {path: 'home', component: HomeComponent}
  

Или всякий раз, когда пользователь вводит /home URL, можем ли мы ограничить на уровне компонентов использование isLoggedIn логической переменной?

 @Component({
  selector: 'app-root',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
}
  

Я думаю, что здесь сработала бы защита. Что-то вроде этого…

 import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from '../services/auth.service';

@Injectable({

  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(public authSvc: AuthService, public router: Router) {}

  canActivate(): boolean {
    this.authSvc.isLogggedIn().then(loggedIn => {
      if (!loggedIn) {
        this.router.navigate(['unauthorised']);
        return false;
      }
    });
    return true;
  }

}
  

Затем, когда вы определяете свои маршруты, включите охрану в объект маршрутизации

   {path: 'login', canActivate: [AuthGuard], component: LoginComponent}
  {path: 'home', component: HomeComponent}
  

Надеюсь, это вам поможет