无法读取角度6上null的属性'成功'

问题描述 投票:0回答:1

我一直在角度6上遇到此错误,现在在注册用户时已将后端连接起来,应该将他定向到管理仪表板,不幸的是,当我使用另一条路线时,正在读取该提示,成功的属性为null弹出窗口告诉我不确定,我要在星期三上午从坦桑尼亚来的新手提交此作业。

core.js:6014 ERROR TypeError: Cannot read property 'success' of null
    at SafeSubscriber._next (login.component.ts:26)

Show 40 more framesHere is my login.components.ts```

这是我的login.components

import { Component, OnInit } from '@angular/core';
import { AuthService } from 'src/app/auth.service';
import { Router } from '@angular/router';

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

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

  ngOnInit() {
  }
  loginUser(event)
  {
    event.preventDefault()
    const target = event.target
    const email= target.querySelector('#email').value
    const password = target.querySelector('#password').value


    this.Auth.loginUser(email, password).subscribe(data => {
      if(data.success)
      {
        //redirect the person to admin page
        this.router.navigate(['admindashboard'])
        this.Auth.setLoggedIn(true)


      }
      else
      {
        window.alert(data.message)
      }
      return false;
    });
    console.log(email, password)
  }

}```

这是我的auth.service.ts

import { Injectable } from '@angular/core';
import{ HttpClient } from '@angular/common/http';

interface myData
{
  success:boolean,
  message: string
}

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  uri ='http://localhost:4000';

  private loggedInStatus = false
  constructor(private http: HttpClient) { }

  setLoggedIn(value: boolean)
  {
  this.loggedInStatus = value
  }

  get isLoggedIn()
  {
    return this.loggedInStatus
  }


  loginUser(email,password){
    return this.http.post<myData>(`${this.uri}/register`, {
      email,
      password
    });
  }


}```

[这里是我的Api

``` server.post('/register', (req, res, next) => {


     const { email, password } = req.body;

     const clearadmin = new Clearadmin({
         email,
         password
     });

     bcrypt.genSalt(10, (err, salt) => {

        bcrypt.hash(clearadmin.password, salt, async (err, hash) => {

            //Hash Password
            clearadmin.password = hash;

            //save clearadmin
            try{
               const newClearadmin = await clearadmin.save();
               res.send(201);
               next();
            }
            catch(err)
            {
             return next(new errors.InternalError(err.message));
            }
        });
     });
    });```
angular
1个回答
0
投票

首先,您没有以正确的方式发送用户凭据,电子邮件和密码应作为服务auth.service.ts]中的键值JSON对象发送。像这样

loginUser(email,password){
    return this.http.post<myData>(`${this.uri}/register`, {
      email:email,
      password:password
    });
  }

下一步,在您的组件login.component.ts

中,您试图读取success属性,而在您的API中,您的响应不包含此属性。您的API响应应如下所示。
res.status(201).json({
                        success:true,
                        msg:'registration successful'
                    })

而且,在您的API中,我建议您以这种方式阅读电子邮件和密码

const email = req.body.email;
const password = req.body.password;
© www.soinside.com 2019 - 2024. All rights reserved.