Question

我是angular的新手，我一直在开发登录和注册系统。我进行了登录，一切正常，但是我想显示登录导航栏的人的数据。首先，我通过发送我从REST API记录的个人数据并将其保存在localStorage中，然后在导航栏中进行打印来实现此目的，问题是当我刚开始会话时，控制台中出现错误具有未定义的名称和角色。为了解决这个问题，他们建议我使用Subject，它可以立即解决我的问题，因为启动会话时控制台中没有错误，并且导航栏正确地向我显示了名称和角色，就像我注销并启动时一样与新用户。尽管该解决方案并没有持续很长时间，但我现在遇到的问题是，当我使用F5时，所有内容都被销毁，并且相同的错误返回到控制台，就好像名称和角色不存在一样，我不知道如何解决它？

抱歉，我正在使用翻译器：（

This is my problem

APP组件：

export class AppComponent {
  public static updateUserStatus: Subject<boolean> = new Subject();
  user: any;
  constructor(private authService: AuthService) {
      AppComponent.updateUserStatus.subscribe((res) => {
        this.user = JSON.parse(localStorage.getItem("datos"));
      });

  }

  ngOnInit() {}
}

AuthService：

signUp(user) {
    return this.http
      .post<any>(this.URL + "/signup", user)
      .pipe(map((res) => res));
  }

  signIn(user): Observable<any> {
    return this.http
      .post<any>(this.URL + "/signin", user)
      .pipe(map((res) => res));
  }

登录组件

export class SigninComponent implements OnInit {
  user = {};
  constructor(private authService: AuthService, private router: Router) {}

  ngOnInit() {}

  signIn() {
    return this.authService.signIn(this.user).subscribe(
      (res) => {
        this.authService.setUser(res.datos);
        this.authService.setToken(res.token);
        /*AL ASIGNAR EL TOKEN Y EL USUARIO, LE DIGO AL APP COMPONENT QUE PUEDE
        SEGUIR EJECUTANDO EL UPDATEUSERSTATUS*/
        AppComponent.updateUserStatus.next(true);
        this.router.navigate(["/home"]);
        Swal.fire(
          "Bienvenido " + res.datos.nombre_usuario,
          "Tu Rol es: " + res.datos.rol,
          "success"
        );

      },
      (err) => {
        Swal.fire({
          icon: "error",
          title: "Error",
          text:
            "No se ha podido iniciar sesion, verifique su correo y contraseña",
        });
      }
    );
  }
}

Answer 1

检查getItem()调用（打字稿）的结果：

const settings = localStorage.getItem('key');
if (settings != null) {
  this.settings = JSON.parse(settings);
}

在html模板中使用

类似于user?.name的对象，可以安全地访问该属性。 ?告诉angular处理未定义的用户
或使用*ngIf隐藏用户信息（只要不可用）

在组件中显示数据时angular6出现问题

1 个答案: