Angular AuthGuard-这是正确的解决方案吗?

时间:2019-04-28 16:28:51

标签: javascript angular routing jwt authorization

我想创建一个路由保护程序,以防止未经授权的用户使用路由。

我正在使用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});
}

我的目的是避免用户在本地存储中手动设置令牌密钥,以查看受保护的路由,即使他无法执行任何XHR请求。

请问您能否验证它的好坏,并在安全方面提出更好的解决方案? 非常感谢!

1 个答案:

答案 0 :(得分:1)

一个好的做法是在服务器端的模型级别上管理角色(或权限)。例如,一个用户类可以具有一个角色属性,例如:

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,它将重定向您的用户。