Question

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

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

如果用户未登录，我的主页也会显示2个不同的视图，因此我检查的服务中有一个布尔值。这是我的流程：

登录组件：这里的错误是绑定到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组件中注入一个依赖项，只是为了检查单个布尔值，并且有更好的方法来做到这一点。

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

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

所以我的问题是在home组件中注入依赖项只是检查单个布尔值，有没有更好的方法呢？

如果您的应用程序只有几个简单的页面，并且不会扩展，则您的方法可能就足够了，但是为此，最佳实践是使用Angular Route Guards 路由防护是一种CanActivate实现，您可以在其中实施身份验证/授权逻辑来保护您的路由（页面）

那么再次注入依赖关系只是为了调用注销方法好吗？此注销方法应该在authService还是其他位置？

应该通过实现HttpInterceptor来完成。这样就无需处理每个http调用来处理错误的响应或添加授权令牌。捕获HTTP拦截器中的错误响应并注销的方法。这样，您不必在每个需要的位置都注入相应的服务。 HttpInterceptor也没什么大不了的。您可以按照this的分步指南并实施自己的

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

1 个答案: