时间戳

首页 > 解决方案 > 离子保持登录

angular - 离子保持登录

问题描述

看，我的 ionic 项目中有一个页面，它是一个简单的登录表单，用户在其中输入其 CPF，然后重定向到将创建新密码或键入现有密码的页面。哪个是问题？如果用户尝试访问home.page登录前，我做了一个简单的路由保护阻止用户

授权登录.service.ts

authenticatedUser: boolean;

private validatedPassword: number;

 validatePassword(user, password) {
      this.http
          .get<RootObject>(
              environment.url + environment.token + '&Metodo=alunoCheckPwd&AlunoIDMain=' + user.id + '&AlunoPwd=' + password
          )
          .subscribe(response => {
              this.validatedPassword = response.LOGIN_SENHA.Password;

              if (this.validatedPassword === 1) {
                  this.loggedIn();

              } else {
                  alert('Invalid Password');
              }
          });
  }

 loggedIn() {
      this.authenticatedUser= true;

      this.router.navigateByUrl('/home');

  }

 userIsAuthenticated() {
    return this.authenticatedUser;
 }

auth-guard.ts

      route: ActivatedRouteSnapshot,
      state: RouterStateSnapshot,
  ): Observable<boolean> | boolean {

    if (this.authLoginService.userIsAuthenticated()) {
      return true;

    } else {
    this.router.navigateByUrl('/login');

    return false;
    }

  }

守卫工作得很好。

问题是什么？我如何让这个用户保持登录状态？因为此时，用户每次打开应用程序时都必须登录。

标签： angularroutingguard

解决方案

loaclStorage API 已经可用，所以在方便保存信息的地方，您需要做的就是：

localStorage.setItem('logged_in', true); // or false

并使用以下方法检索值：

localStorage.getItem('logged_in'));

据推测，您将在确认密码时保存它，并在登录屏幕加载时或之前检索。

还有其他处理会话的方法比这更好，但作为一种简单易用的方法，以上就是它的全部内容。

推荐阅读