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

Question

我是MEAN Stack应用程序的新手，尝试将数据从服务器发送到前端时遇到一些麻烦。但是，我确实在进行一些交流，但是这似乎是我能做的。在服务器中，我正在发送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消息外，我似乎无法执行其他要求。我的问题是希望以其他方式使用它，而不只是即兴消息。例如，如果用户没有会话，那么我希望他们导航回登录页面。这是我尝试过但失败的。

服务器

// 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`);
}

我发现通信的唯一方法是通过发送错误的Flash消息，但没有其他方法。

Answer 1

您可以做的是调用api来检查用户是否在ngOnInit生命周期挂钩中登录，因此，每次加载组件时，您都可以检查会话是否存在于后端并相应地进行路由。 / p>

 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

解决此问题