角度正确的登录流程和结构

Question

我正在尝试实现一个具有angular的前端，但我不确定我的登录和整体流程是否正确。

我有一个登录页面的登录组件，它将用户信息发送到auth服务进行身份验证，然后我将auth令牌保存在localhost中，并在每次get请求用户数据时发送它，但我还需要检查是否有过期的jwt令牌，因此我注销了用户并从信息中清除了localstorage。但我不确定这种注销应该发生在哪里。

此外，我的主页显示两个不同的视图，无论用户是否登录，所以我在我检查的服务中有一个布尔值。这是我的流程：

login组件:这里的错误绑定到html，假设凭据无效。

export class LoginComponent implements OnInit {
  error : string;

  constructor(private authService : AuthService) { }

  ngOnInit() {
    this.authService.login("Robocop1", "password").subscribe(
      data =>{
        localStorage.setItem('Authorization', data['token'])
        this.auth.isLoggedIn = true
      },
      err  => this.error = err['error']
    );
  }

}

服务组件：

export class AuthService {

  isLoggedIn : boolean = false

  constructor(private httpClient : HttpClient) { }

  login(username, password) {
    return this.httpClient.post('http://localhost:8090/login', {
      username,
      password
    })
  }
}

这是我的home组件，它首先检查用户是否已登录：

export class HomeComponent implements OnInit {

  isLoggedIn : boolean

  constructor(private auth : AuthService) { }

  ngOnInit() {
    this.isLoggedIn = this.auth.isLoggedIn

  }

}

并显示html的不同部分：

   <div *ngIf="!isLoggedIn">
       <p>
           hey user
      </p>
   </div>
   <div *ngIf="isLoggedIn">
       <p>
           not logged
       </p>
   </div>

所以我的问题是，在home组件中插入一个依赖项，只是为了检查单个布尔值，有没有更好的方法。

我也可以有另一个从数据库获取用户数据的数据组件。在post请求中，我将发送身份验证令牌，因此我将拥有如下内容：

this.dataService.getItems().subscribe(
    data =>{
        this.userData = data
    },
    err  => {
        if(err['error' === 'Jwt token has expired'){
            this.authService.logout()
        }else{
            this.error = err['error']
        }
    }
);

那么，再次注入依赖项仅仅是为了调用注销方法是可以的吗？此注销方法应该在authService中还是在其他地方？

Answer 1

所以我的问题是，在主组件中插入一个依赖项，好的，只是为了检查单个布尔值，有没有更好的方法来做这件事。，

。

如果您的应用程序只有几个简单的页面，并且不会扩展，那么您的方法可能就足够了，但对于它来说，最佳实践是使用Angular Route Guards。路由保护是一种CanActivate实现，您可以在其中实现身份验证/授权逻辑来保护您的路由(页面)

那么，再次注入依赖项仅仅是为了调用

方法是可以的吗？此注销方法应该在authService中还是在其他地方？

这应该通过实现一个HttpInterceptor来完成。这样您就不需要为处理错误响应或添加授权令牌而处理每个http调用。捕获http拦截器内部的错误响应并注销是可行的方法。这样，您就不必将相应的服务注入到所需的每个位置。HttpInterceptor也不是什么大问题。您可以遵循this逐步指南并实现您自己的