Angular — core.js:6210 ОШИБКА типа Ошибка: Не удается прочитать свойство «роли» неопределенного

#angular

Вопрос:

В Angular-11 у меня есть этот код:

 setRoles(roles: string | any[]){
  if (roles){
    // tslint:disable-next-line:prefer-const
    let data = [roles[0].name];
    for (let i = 1; i < roles.length; i  ){
      data.push(roles[i].name);
    }
    localStorage.setItem('roles', JSON.stringify(data));
  } else {
    localStorage.setItem('roles', '');
  }
}

export class AuthComponent implements OnInit {

  public loggedIn!: boolean;

  public form = {
    username : null,
    password : null,
    remember_me : false
  };

  name = null;

  public error = null;

  constructor(
    private api: ApiService,
    private token: TokenService,
    private router: Router,
    private auth: AuthService,
    ) {}

  // tslint:disable-next-line:typedef
  ngOnInit() {;
  }

  // tslint:disable-next-line:typedef
  onSubmit(){
  //  this.notify.info("Wait...", {timeout:0});
    const headers = {
      'Content-Type' : 'application/json'
    }
    return this.api.post('auth/user/login', this.form, headers).subscribe(
      data => this.tokenHandler(data),
      error => this.errorHandler(error.error)
    );
  }

  // tslint:disable-next-line:typedef
  errorHandler(error: any){
  //  this.notify.clear();
    console.log(error);
    if (error.errors amp;amp; error.errors.username){
      this.error = error.errors.username;
    }
    else if (error.message === 'Unauthorized'){
      this.error = null;
    } else {
      this.error = null;
    }
  }

  // tslint:disable-next-line:typedef
  tokenHandler(data: any){
  //  this.students = null;
 //   this.notify.clear();
    console.log(data);
    this.token.setRoles(data.user.roles);
    this.token.set(data.token_type   ' '   data.access_token, data);
    this.auth.changeAuthStatus(true);
    this.loggedIn = true;
    this.router.navigateByUrl('/dashboard');
    window.location.reload();
  } 
}
 

Он выделяет эти две линии:

ошибка => this.ErrorHandler(ошибка.ошибка)

this.token.setRoles(data.user.roles);

консоль.журнал(данные);

в токенхандлере(данные: любые){

дает:

 {
  "message": "Successfully Logged In.",
  "error": false,
  "code": 200,
  "results": {
    "user": {
      "id": 2,
      "username": "Lamptey",
      "email": "lamptey@gmail.com",
      "mobile_number": "2318056785544",
      "first_name": "Lamptey",
      "last_name": "Akwetey",
      "email_verified_at": null,
      "active": 1,
      "created_at": "2021-05-24T07:27:41.000000Z",
      "updated_at": "2021-05-26T19:02:30.000000Z",
      "roles": [{
        "id": 4,
        "name": "Supervisor",
        "guard_name": "api",
        "created_at": "2021-05-24T07:02:14.000000Z",
        "updated_at": "2021-05-24T07:02:14.000000Z",
        "pivot": {
          "model_id": 2,
          "role_id": 4,
          "model_type": "App\Models\User"
        }
      }],
      "employee": null
    },
    "access_token": {
      "id": "cggfgfgfggggggggggggggg",
      "user_id": 2,
      "client_id": 1,
      "name": "iHRM",
      "scopes": [],
      "revoked": false,
      "created_at": "2021-05-26 20:02:30",
      "updated_at": "2021-05-26 20:02:30",
      "expires_at": "2021-08-25T19:02:30.000000Z"
    },
    "token_type": "Bearer",
    "expires_at": "2021-08-25 20:02:30"
  }
}
 

Как мне это решить?

Спасибо

Комментарии:

1. верните этот.api.post(«авторизация/пользователь/логин», эта.форма, заголовки) что здесь возвращается? можете ли вы сообщить нам, происходит ли это в блоке ошибок или в блоке данных

2. @Tejeshree — Как мне узнать, что там возвращено?

3. у вас есть консольные операторы в обоих обработчиках правильно, вы определяете их оттуда

4. @Tejeshree — Я обновил свой код с помощью того, что console.log(данные); выдает в tokenHandler(данные: любые){

Ответ №1:

Вы пытаетесь извлечь пользователей из data.user.roles

 this.token.setRoles(data.user.roles);
 

Что не является правильной ссылкой на роли. Попробуйте ниже, в соответствии с вашим журналом консоли для получения данных, увидеть, что user завернуто в results

 this.token.setRoles(data.results.user.roles);