Question

在 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 && 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();
  } 
}

突出显示这两行：

<块引用>

error => this.errorHandler(error.error)

<块引用>

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

console.log(数据);

在 tokenHandler(data: any){

给出：

{
  "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"
  }
}

我该如何解决？

谢谢

Answer 1

您正在尝试从 data.user.roles 获取用户

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

这不是对角色的正确引用。试试下面，根据你的控制台日志数据，可以看到 user 被包裹在 results

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

Angular - core.js:6210 错误类型错误：无法读取未定义的属性“角色”

1 个答案: