如何在 MEAN 堆栈应用程序中从后端到前端进行通信？

Question

我是 MEAN 堆栈应用程序的新手，尝试将数据从服务器发送到前端时遇到了一些麻烦。但是，我确实有一些交流正在进行，但这似乎是我所能做的。在服务器中，我发送了 json 消息。

服务器

router.route("/users/register").post((req, res) => { 

registerLogin.findOne({ $or: [{ username }, { email }]}, (err, user) => {
        if (err)
            res.send(err);

        else if (!username || !email || !password)  
            res.status(403).json({ registerErrRequired: "Fill out whole form." });

前端

 registerUser(username, email, password)  {
    const user =  {
      username: username,
      email: email,
      password: password
    };
    return this.http.post(`${this.uri}/users/register`, user)
    .pipe(map(response => console.log(response)))

    .subscribe(() => { this.router.navigate(["/users/login"]) }, (errResp) => {

      errResp.error ? this.ngFlashMessageService.showFlashMessage({

        messages: [errResp.error.registerErrRequired], // Where json message gets caught and shown to the browser
      dismissible: true,
      timeout: false,
      type: 'danger'
      }) : console.log("An unkown error occured.");
    });
  }

这很好用，但除了使用 Flash 消息外，我似乎无法执行 req/res。我的问题是想以其他方式使用它，而不仅仅是闪存消息。例如，如果用户没有会话，那么我希望他们导航回登录页面。这是我尝试但失败的方法。

服务器

// Middleware
const redirectLogin = ((req, res, next) => {
    if (!req.session.user) 
        res.status(401).json({ loggedIn: false });
    else
        next();
}); 
// Route
router.route("/home").get(redirectLogin, (req, res) => {
    Blog.find((err, docs) => {
        if (err)
        console.log(err);
    else
        res.json(docs);
    }); 
});

前端

homePage() {
  // Here is where I would like to say, If session, then true, else navigate(["/users/login"])
   if (loggedIn === false)
       this.router.navigate(["/users/login"])
   else
       // Success
  return this.http.get(`${this.uri}/home`);
}

我发现沟通的唯一方法是通过发送错误消息，但没有别的。

Answer 1

你可以在ngOnInit生命周期钩子中调用一个api来检查用户是否登录，所以每次你的组件加载时，你可以检查后端是否存在会话并相应地路由。

 export class App implements OnInit{
          constructor(){
             //called first time before the ngOnInit()
          }

          ngOnInit(){
           //CheckLogin() is a method in your service which calls your backend api
             this.http.post("your authentication url to check if session exits ",{username:username}).subscribe(data=>{
            if (data["loggedIn"] === false)

               this.router.navigate(["/users/login"])


        }) 
          }

}

Angular也有HTTP interceptors，你可以用jwt和http interceptors解决这个问题