用户未登录如何跳转到登录页面？(前端: Angular7) (后端: Node Js)

Question

在我的项目中，我使用两个页面进行登录和crud操作。我需要些帮助。我想先检查用户登录，如果没有登录，重定向到登录页面。用户登录后有crud操作。无论哪个用户登录，都只会显示他们添加的产品。我该怎么做呢？我在后台使用了node js。

这是login.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators, FormGroup, FormControl } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { LoginService } from '../shared/login.service';

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

    loginForm: FormGroup;

    username = new FormControl('');
    password = new FormControl('');

    constructor(
        private http: HttpClient,
        private authService: LoginService,
        private formBuilder: FormBuilder,
        private _router: Router) { }

        ngOnInit() {
            this.loginForm = this.formBuilder.group({
              username: ['', Validators.required],
              password: ['', Validators.required]
            });
          }

          get f() { return this.loginForm.controls; }

    loginSubmit() {
        this.http.post("http://localhost:3000/login", { username: this.username.value, password: this.password.value })
            .subscribe(result => {
                debugger;
                if(result.result){
                    this._router.navigate(["/payment"]);
                    // sessionstorage
                }else{
                    alert("Bilgiler yanlış");
                }
            }, error => {
                alert('hata oluştur');
            });
    }

}

这是login.service.ts

import { loginDetail } from './login.model';
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class LoginService {

  //private readonly mockedUser = new SignInData()
  isAuthenticated = false;

  loginFormData: loginDetail= {
    username: null,
    password: null,
    user_id: null
  };

  list : loginDetail[];

  readonly rootURL = 'http://localhost:5000/api';
  readonly rootURLnode = 'http://localhost:3000/';


  constructor(private http: HttpClient, private router: Router) { }


  login() {
    
    //debugger;
    //console.log(this.loginFormData)
    this.isAuthenticated = true;
    this.router.navigate(['payment-details']);

    return this.http.post(this.rootURLnode + 'payment-details', this.loginFormData);
  }
}

Answer 1

使用路由防护检查用户是否已通过身份验证。下面你可以找到一个例子：

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private _authService: AuthService, private _router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const url: string = state.url;

    return this.checkLogin(url);
  }
  
checkLogin(url: string): boolean {
    if (this._authService. isAuthenticated) { 
       return true; 
    }

    // Store the attempted URL for redirecting
    this._authService.redirectUrl = url;

    // Navigate to the login page
    this.router.navigate(['/login']);
    return false;
  }
}

您可以在路由模块中使用它，如下所示：

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('.home/home.module').then((m) => m.HomeModule),
    canActivate: [AuthGuard]
  }
];

您的登录方法应如下所示：

login() {
    return this.http.post(this.rootURLnode + 'payment-details', 
     this.loginFormData).pipe(
       tap(() => {
            // you need to do this only for the success case
            this.isAuthenticated = true;
            this.router.navigate(['payment-details']);
        })
  }
}

我建议您阅读Angular docs https://angular.io/guide/router-tutorial中的教程。