如何检查用户是否已通过角度身份验证答案

【问题标题】：How to check user has already been authenticated in angular如何检查用户是否已通过角度身份验证
【发布时间】：2018-10-29 08:08:17
【问题描述】：

我有一个角度应用程序，它使用 oAuth 来检查用户是否有效。 AuthGuard 和 AuthService 负责将用户路由到第三方登录页面，一旦用户获得令牌，他就会被路由回 Angular 应用程序，在该应用程序中通过对节点 API 进行 REST 调用来验证令牌。如果token有效，则token保存在sessionStorage中，用户登录。

下面所有的路由都有 AuthGuard，所以每次用户登录后尝试渲染页面时，AuthService 都会将令牌发送给 API 以检查其有效性。当用户已经登录时，如何避免在渲染每个路由之前进行 API 调用以进行令牌验证。

{
    path: '',
    component: LoginComponent,
  },
  {
    path: 'user',
    component: UserComponent, 
    canActivate: [AuthGuard]
  },
  {
    path: 'dashboard',
    component: dashboardComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: '',
        loadChildren: './other-layout/other-layout.module#otherModule'
      }
    ]
  }

以下是 AuthGuard 代码：

@Injectable()
export class AuthGuard implements CanActivate {

  params: any;

  constructor(private auth: AuthService,
    private router: Router,
    private route: ActivatedRoute){
  }
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {


    return new Promise((resolve, reject)=>{
      let authenticated = this.authService.handleAuthentication()

      authenticated.then((result) =>{
        if(result){
          resolve(true);
        }else{
          console.log('Authenication failed. User is being routed to third party site for authentication')
          this.authService.routeForOAuth();
          reject(false);
        }
      })
    })  
  }
}

验证服务代码：

  public handleAuthentication(): any {
    return Promise((resolve, reject)=>{
      if (window.location.hash.includes("access_token")){

        let windowlocation = window.location.hash.split('&');
        this.validateToken(windowlocation[0].split('=')[1],(result) => {  
            resolve(result);
        })
      } else if (sessionStorage.getItem('access_token') != null){
        this.validateToken(sessionStorage.getItem('access_token'), (result) => {              
            resolve(result);    
        })

      } else{
          resolve(false);
      }
    })
  }

【问题讨论】：

你能在你的 authGuard 中发布你的canActivate 方法吗？
我已在问题中添加了 AuthGuard 代码。
你的身份提供者是什么？
它是一个内部 OAuth 提供者（企业范围）

标签： angular oauth-2.0 angular2-routing

【解决方案1】：

就像您将令牌保存在会话存储中一样，您也可以保存用户已登录的事实。虽然这不是很安全，因为用户可以找到您在本地存储中存储数据的方式并根据需要进行修改。

您可以考虑在一段时间内使用令牌的存在作为保证，这意味着您可以检查令牌是否存在然后考虑用户已登录，并每隔几分钟将其过期，因此您必须重新检查然后进行身份验证。这取决于您希望系统有多强大。

恕我直言，最佳实践是获取令牌，将其用于 authGuard canActivate，并像您已经在做的那样使用 oauth2 保护您的端点。这样，即使有人发现如何“破解”您的本地存储使用情况，他仍然无法访问您的数据，因为您的端点是安全的。他将得到的只是一个错误页面，其中没有完成呼叫。如果您有想要保护的静态内容并且它不是通过 http 调用从服务器获取的，那么请考虑在 authGuard 上使用身份验证调用，就像您已经在做的那样。

希望对你有帮助

【讨论】：

谢谢@Giwrgos Lampadaridis

【解决方案2】：

好吧，就我而言，对每条路由进行 API 调用以检查令牌是否经过验证是最佳做法。这就是 AuthGuard 的用途。这是您检查令牌是否正确的唯一方法。

否则，您可以检查您的 canactivate 方法，如果令牌存在于会话存储中，则不要进行 API 调用。但同样，不推荐这种方法。

【讨论】：