Angular 2 和 JWT 身份验证 (Auth0)

Posted 2023-03-10

【中文标题】Angular 2 和 JWT 身份验证 (Auth0)

【英文标题】：Angular 2 and JWT authentication (Auth0)

【发布时间】：2016-09-25 21:41:38

【问题描述】：

我有一个带有 JWT 身份验证 (Auth0) 的 Angular 2 应用程序，在用户登录后将配置文件和令牌 ID 存储在 localStorage 中，配置文件包含一个“角色”属性来检查用户是否可以访问特定页面。 一切都像一个魅力，但如果用户将 localStorage 中的角色属性更改为“admin”，例如并重新加载应用程序，他可以访问他未授权的页面。我该如何处理？

auth.service.ts：

declare var Auth0Lock: any;

@Injectable()
export Class AuthService 

lock = new Auth0Lock(ID, domain);
user: Object;

constructor() 
  this.user = JSON.parse(localStorage.getItem('profile'));


public login() 
  // Auth0 method
  this.lock.show(, (err: string, profile: Object, token: string) => 
    if (err)  console.log(err); return; 

    localStorage.setItem('profile', JSON.stringify(profile));
    localStorage.setItem('id_token', token);
  );


public logout() 
  localStorage.removeItem('profile');
  localStorage.removeItem('id_token');


public loggedIn() 
  return tokenNotExpired();


public isAdmin() 
   if (this.user['role'] == 'admin') 
     return true;
    else 
     return false;
   
 

app.component.ts：

// imports, etc
export Class AppComponent 
  constructor(private auth: AuthService) 

app.component.html：

<nav>
  <ul>
    <li><a [routerLink]="['Customers']" *ngIf="auth.loggedIn()">Customers</a></li>
    <li><a [routerLink]="['Admin']" *ngIf="auth.loggedIn() && auth.isAdmin()">Admin</a></li>
  </ul>
</nav>

任何想法都将不胜感激

【问题讨论】：

您还可以在您的 api 中添加过滤器，为每个未经授权的请求响应 401/403 状态。然后在客户端，监听401 和403 http 错误以提高安全性。查看我关于如何做到这一点的文章 - adonespitogo.com/articles/angular-2-extending-http-provider

【参考方案1】：

在我看来，如果您拥有 javascript 前端框架，就不可能创建完全安全的页面/表单。我的意思是，当所有应用程序都下载到客户端并在客户端构建时，总是有可能打开任何表单。

对我来说，保护后端 api 的安全很重要，并将“黑客”机会留给初级开发人员。

如果你有这样的需求，尝试使用服务器端生成的框架：php、asp.net mvc、jsp & etc。

更新

当它出现时，Angular2 有指令@CanActivate，它提供了更准确的方法来取消导航。但服务器端授权在基于 javascript 前端的应用程序中至关重要。

这将有助于如何处理快递后端的JWT：express-jwt

【讨论】：

感谢您的回复，实际上我有一个处理用户的快速后端，但是每次用户是管理员访问该页面时我都需要检查，我认为有另一种方法可以做到这一点，因为我需要向节点发出异步http请求来回调用户，我不知道这是否正确

欢迎您，您可以保护数据，而不是表单的 html 本身 - 这是我的建议。如果我理解正确，在该页面上，应该只重定向管理员，因为该页面对服务器进行了一些异步调用？如果是，那为什么会出现问题？您可以在传递的 JWT 令牌中检查服务器端的访问权限。

要访问管理页面，用户必须是管理员。我有一个只有管理员才能看到的带有管理员链接的菜单。因此，当我运行我的应用程序时，我需要对传递 JWT 令牌的服务器进行 http 调用，如果该用户是管理员则返回，然后显示链接与否？

类似的东西，另外： 1. 如果菜单是在服务器上生成的，那么您只能包含“管理员”角色的管理员链接。我想你有静态菜单（不是在服务器上生成的）。 2.如果您在应用程序中使用标准的声明方式路由，则用户将能够在没有链接的情况下进行重定向。 3. 该管理页面上的所有 api 方法都应从服务器返回 403，否则任何人都可以从 Web 浏览器的控制台调用您的 api。

是的，使用 routerLink 的菜单是静态的，我正在考虑使用 @CanActivate() 装饰器来防止用户在没有链接的情况下访问。