javascript - Angular 正确的登录流程和结构

Question

我正在尝试使用 Angular 实现前端，但我不确定我的登录和整体流程是否正确。

我有一个登录页面的登录组件，它将用户信息发送到 auth 服务进行身份验证，然后我将 auth token 保存在本地主机中，并在每次获取用户数据请求时发送它，但我还需要检查过期的 jwt token ，以便我注销用户并从信息中清除本地存储。但是我不确定应该在哪里注销。

如果用户登录或未登录，我的主页也会显示 2 个不同的 View ，因此我在检查的服务中有一个 bool 值。这是我的流程:

登录组件:这里的错误绑定(bind)到 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
    })
  }
}

这是我的主页组件，它首先检查用户是否已登录:

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 组件中注入(inject)一个依赖项就可以了，只是为了检查单个 bool 值，是否有更好的方法来做到这一点。

我还可以有另一个数据组件，从数据库中获取用户数据。在发布请求中，我发送了身份验证 token ，因此我将拥有类似的内容:

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

那么再次注入(inject)依赖只是为了调用注销方法好吗？这个注销方法应该在 authService 中还是在其他地方？

Answer 1

So my question is is injetcing a dependencies in the home component ok just to check for single boolean and is there a better way to do it.

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

So is again injecting dependency just to call a logout method ok? should this logout method be in the authService or elsewhere?

这应该通过实现 HttpInterceptor 来完成.这样您就不需要处理每个 http 调用来处理错误响应或添加授权 token 。在您的 http 拦截器中捕获错误响应并注销是可行的方法。这样您就不必将相应的服务注入(inject)每个需要的地方。HttpInterceptor 也没什么大不了的。可以关注this逐步指导并实现您自己的