Node.js 如果用户未登录，如何重定向到登录页面？（前端：Angular7）（后端：Node Js）

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

这是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);
  }
}

---

使用route guard检查用户是否经过身份验证。您可以在下面找到一个示例：

@可注入({
providedIn:'根'
})
导出类AuthGuard实现了CanActivate{
构造函数（私有_authService:authService，私有_路由器：路由器）{}
canActivate（路由：ActivatedRouteSnapshot，状态：RouterStateSnashot）：布尔值{
const url:string=state.url；
返回这个.checkLogin（url）；
}
checkLogin（url:string）：布尔值{
如果（this._authService.isAuthenticated）{
返回true；
}
//存储尝试重定向的URL
这是。_authService.redirectUrl=url；
//导航到登录页面
this.router.navigate（['/login']）；
返回false；
}
}

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

常数路由：路由=[
{
路径：“”，
loadChildren:（）=>import（'.home/home.module'）。然后（（m）=>m.HomeModule），
canActivate:[AuthGuard]
}
];

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

login（）{
返回this.http.post（this.rootURLnode+“付款详细信息”，
这是一个.loginFormData）管道(
点击（（）=>{
//您只需要为成功案例这样做
this.isAuthenticated=true；
this.router.navigate（['payment-details']）；
})
}
}

---

我建议您阅读Angular文档中的教程

这种功能可以在Angular中使用Guards干净地实现，我如何使用？我是Angular的新手。您能再解释一下吗？您能告诉我如何通过编写代码来编写吗？等等