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

Question

我想创建一个路由防护来保护路由免受未经授权的用户的侵害。

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

我的想法是，当用户想要访问 protected 管理路由时，authguard 将验证 token 发送到 nodeJS/Express 服务器，验证后向客户端返回 true 或 401(无论用户是管理员)。

身份验证服务:

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});
}

我的目的是避免用户在本地存储中手动设置 token key 来查看 protected 路由，即使他无法实现任何 XHR 请求。

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

Answer 1

一个好的做法是在服务器端的模型级别管理 Angular 色(或权限)。例如，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，它将重定向您的用户。