登录后点击验证api并保存用户会话

时间:2018-04-23 21:51:54

标签: angular typescript authentication

目前,用户以典型的形式输入用户名和密码。在提交时,将调用login方法并针对后端api检查用户凭据。如果有效,则将用户名存储在localStorage中,并检查用户是否通过路由保护在整个应用程序中登录(即,如果名称存储在localStorage中,则他们已登录并可在整个应用程序中安全导航)。

虽然目前正在运行,但如果用户返回/登录页面路由,可能会遇到一些问题,他们必须再次登录,而不是将用户返回主页或实际返回。

可能还有其他我现在没想到的情况,我想知道,最佳做法是什么?如何改进这段代码?这段代码一般有哪些安全漏洞或漏洞?

这是我的登录方法:

login(credentials: User, isValid: boolean) {
        this.userId = credentials.userId;
        this.password = credentials.password;

        this.userService.validateUser(credentials.userId, credentials.password).subscribe(data => {
          this.userloginInfo = data;

         if (localStorage.getItem('username')) {

          localStorage.removeItem('username');
          localStorage.setItem('username', credentials.userId.toUpperCase());

       } else {
        localStorage.setItem('username', credentials.userId.toUpperCase());
       }

          this.displayErrors = false;
          console.log('login success');
          this.authService.login(credentials.userId.toUpperCase());
          this.router.navigate(['/home']);

      }, (err) => {
            this.displayErrors = true;
            console.log('login failed');
      });
    }

1 个答案:

答案 0 :(得分:0)

使用相同的路线保护但添加一些逻辑。

每次进入登录页面时,都应检查用户是否已登录。我是通过在每次使用您的凭据或访问令牌的请求时将存储在服务中的登录标志设置为true来实现的。是成功/有效的。

因此,您应该能够将其恢复到登录页面的唯一方法是,您创建的登录本地存储或登录标记是清除还是错误。