我收到错误无法读取未定义的属性（读取 'include'）

Question

当我点击登录页面中的登录按钮时出现此错误：这个错误在这里： 调用时无法读取未定义的属性（读取 'include'） window.location.reload(); 什么问题，我搜索了但没有找到问题感谢您的指导

我的 ts 代码在这里 :

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../_services/auth.service';
import { TokenStorageService } from '../_services/token-storage.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  form: any = {
    username: null,
    password: null
  };
  isLoggedIn = false;
  isLoginFailed = false;
  errorMessage = '';
  roles: string[] = [];

  constructor(private authService: AuthService, private tokenStorage: TokenStorageService) { }

  ngOnInit(): void {
    if (this.tokenStorage.getToken()) {
      this.isLoggedIn = true;
      this.roles = this.tokenStorage.getUser().roles;
    }
  }

  onSubmit(): void {
    const { username, password } = this.form;

    this.authService.login(username, password).subscribe(
      data => {
        this.tokenStorage.saveToken(data.accessToken);
        this.tokenStorage.saveUser(data);

        this.isLoginFailed = false;
        this.isLoggedIn = true;
        this.roles = this.tokenStorage.getUser().roles;
        this.reloadPage();
      },
      err => {
        this.errorMessage = err.error.message;
        this.isLoginFailed = true;
      }
    );
  }

  reloadPage(): void {
    window.location.reload();
  }
}

我的 html 代码是

 <div id="image">
<div class="container">

  <div class="row justify-content-center">
  <div class="col-sm-10 col-md-8 col-lg-6 col-xl-5   p-5 ">
    <mat-card>
      <mat-card-header >
        <mat-card-title> </mat-card-title>
      </mat-card-header>
      <mat-card-content>
    <img src="https://s4.uupload.ir/files/user3_r3fq.png" class="p-2">
      <form   *ngIf="!isLoggedIn"
        name="form"
        (ngSubmit)="f.form.valid && onSubmit()"
        #f="ngForm"
        novalidate
      >
        <div class="form-group justify-content-center ">
          <mat-form-field >
          <label for="username"></label>
          <i class="fa fa-user icon"></i>
          <input matInput
            type="text"
            name="username"
            placeholder="Username"
            [(ngModel)]="form.username"
            required
            #username="ngModel"
          /></mat-form-field>
          <div id="mes"
            role="alert"
            *ngIf="username.errors && f.submitted"
          >
          please enter user name
          </div>
        </div>

        <div class="form-group">    <mat-form-field>
          <label for="password"></label>
          <input matInput
            type="password"
  placeholder="Password"
            name="password"
            [(ngModel)]="form.password"
            required
            minlength="4"
            #password="ngModel"
          />

        </mat-form-field>
          <div

            role="alert"
            *ngIf="password.errors && f.submitted"
          >
            <div id="mes" *ngIf="password.errors.required">Please Enter pass</div>
            <div *ngIf="password.errors.minlength">
              Password must be at least 6 characters
            </div>
          </div>
        </div>
        <div >
          <button mat-raised-button class="btn btn-primary" >
           <span>Login</span>
          </button>

        </div>
        <div >
          <div

            role="alert"
            *ngIf="f.submitted && isLoginFailed"
          >
            Login failed: {{ errorMessage }}
          </div>
        </div>
      </form>
    </mat-card-content>
    </mat-card>
      <div  *ngIf="isLoggedIn">
        Logged in as {{ roles }}.
      </div>

    </div>

  </div>
</div>
</div>

我的user.service.ts是

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
const API_URL = 'http://localhost:8080/api/test/';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  constructor(private http: HttpClient) { }

  getPublicContent(): Observable<any> {
    return this.http.get(API_URL + 'all', { responseType: 'text' });
  }

  getUserBoard(): Observable<any> {
    return this.http.get(API_URL + 'user', { responseType: 'text' });
  }

  getModeratorBoard(): Observable<any> {
    return this.http.get(API_URL + 'mod', { responseType: 'text' });
  }

  getAdminBoard(): Observable<any> {
    return this.http.get(API_URL + 'admin', { responseType: 'text' });
  }
}

我的auth.service.ts是

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
const AUTH_API = 'http://192.168.1.135:8282/api/Users/authenticate';
const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  m:any;
  constructor(private http: HttpClient) { }

  login(username: string, password: string): Observable<any> {
  this.m= this.http.post(AUTH_API , {username,password}, httpOptions);
  console.log(this.m);
  return this.m;
 }

  register(username: string, email: string, password: string): Observable<any> {
    return this.http.post(AUTH_API + 'signup', {
      username,
      email,
      password
    }, httpOptions);
  }
}

Answer 1

您似乎在这一行中遇到了问题，您需要检查 getUser 是否返回了您需要的内容。要抑制错误，您需要更改：

this.roles = this.tokenStorage.getUser().roles;

尝试更改为：

this.roles = this.tokenStorage.getUser()?.roles;

我收到错误无法读取未定义的属性（读取 'include'）

i get error Cannot read properties of undefined (reading 'include')

javascript

typescript

angular-material

angular