Я хочу перейти на другую страницу после того, как нажму «Войти»

Я использую .Net в качестве серверной части, и теперь я работаю с angular для части маршрутизации. Я застрял в navagite на другой странице, используя аутентификацию, которую я должен использовать перемещаться по маршрутизатору после подписки, но я не знаю, как

export class LoginComponent {

  title = 'webUI.UI';
  user = new User();

  constructor(private authService: AuthService, private router: Router) {}

  
  login(user: User) {
    this.authService.login(user).subscribe((token: string) => {
      localStorage.setItem('authToken', token);
    });

    if (localStorage.getItem('authToken') != null){
??????
      
    }
  }
}

мой роутер

const routes: Routes = [

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


{

  path: 'signup',
    component: SignupComponent
},

{
  path: 'home',
  component: EmployeepListComponent
},

я пытался исправить, как вы сказали, но я получил эту ошибку ?? ОШИБКА Ошибка: Uncaught (в обещании): Ошибка: NG04002: Не удается сопоставить какие-либо маршруты. Сегмент URL: «домашний» Ошибка: NG04002: Не удается найти ни одного маршрута. Сегмент URL: «домашний»

— 17.12.2022 21:34

Пожалуйста, не спамьте тегами. [angular] предназначен для вопросов об Angular 2+, современном фреймворке. [angularjs] предназначен для вопросов об AngularJS 1.x, устаревшем фреймворке. Отредактируйте свой вопрос соответствующим образом. Кроме того, вместо того, чтобы добавлять комментарии с разъяснениями, отредактируйте вопрос, включив в него пояснения.

— 17.12.2022 21:35

angular angular-ui-router angular2-routing

17.12.2022 21:09

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Angular и React для вашего проекта веб-разработки?

Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...

Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf

Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.

Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

Мое недавнее углубление в Angular

Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...

Освоение Observables и Subjects в Rxjs:

Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Сделайте это в компоненте ngOnInit в приложении:

ngOnInit(){
  if (localStorage.getItem('authToken') != null){
    this.router.navigete(['login'])
   }
}

или в функции входа в систему сделайте следующее:

login(user: User) {
 this.authService.login(user).subscribe((token: string) => {
    if (token !=null)  {
       localStorage.setItem('authToken', token); 
       this.router.navigate(['otherPath'])
     }
  });
}

17.12.2022 21:24

Ответ принят как подходящий

Вы также можете использовать Guard для этого. Подробнее здесь. canActivateguard может защитить любой компонент внутри вашего маршрутизатора. Таким образом, вы можете проверить свой токен или что-то еще, а затем перенаправить на вход или на страницу, на которую пользователь хочет перейти.

import { Injectable } from "@angular/core";
import { Router } from "@angular/router";
import {
  CanActivate,
  ActivatedRouteSnapshot,
  RouterStateSnapshot
} from "@angular/router";
import { Observable } from "rxjs";
import { tap } from "rxjs/operators";

import { AuthService } from "./auth.service";

@Injectable()
export class CanActivateGuard implements CanActivate {

  constructor(
    private auth: AuthService,
    private router: Router
  ) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    const token = this.auth.getToken();
    const url = "/token/verify/";

    if (!token) {
      this.router.navigate(["/login"]);
      return false;
    }

    return this.auth.verifyToken().pipe(
      tap(allowed => {
        if (!allowed) this.router.navigate(["/login"]);
      })
    );
  }
}

Вот пример Stackblitz.

17.12.2022 21:34