Angular AuthGuard - 它是一个正确的解决方案吗？

Posted 2021-04-08

我想创建一个路由保护，以保护路由免受未经授权的用户。

我使用jsonwebtoken进行授权，目前将其存储在localStorage中。

我的想法是，当用户想要访问受保护的管理路由时，authguard会将用于验证的令牌发送到nodeJS / Express服务器，该服务器在验证后返回true或401（无论用户是否为admin）到客户端。

身份验证服务：

isLoggedIn(){
  let headers = new HttpHeaders().set('x-auth-token',localStorage.getItem('token') || '');
  return this.http.post('http://localhost:3000/api/users/check-auth', {}, { headers: headers }).toPromise();
}

authGuard服务：

canActivate(){
    return this.sign.isLoggedIn().then(res => {return res;}).catch(ex => {return ex});
}

我的目的是避免用户在localstorage中手动设置令牌密钥以查看受保护的路由，即使他无法实现任何XHR请求。

您能否验证一下它是好还是坏，并在安全方面提出更好的解决方案？非常感谢！

答案

一个好的做法是在服务器端管理模型级别的角色（或权限）。例如，User类可以具有roles属性，例如：

auth.service.ts
myUser.roles = ['ROLE_ADMIN']

这样，当您的用户登录时，您可以将信息存储在auth.service.ts中

// auth.service.ts
get isAdmin() {
    return this.user.roles.includes('ROLE_ADMIN')
}

请注意，通常您希望将此信息存储在应用程序状态管理中，无论是简单的rxjs，ngrx，ngxs ......

最后，您将添加一个AuthInterceptor，如果您的API返回401，它将重定向您的用户。