如何根据 JWT 令牌中的属性更改前端（Angular）视图上显示的内容？

Posted 2023-03-10

【中文标题】如何根据 JWT 令牌中的属性更改前端（Angular）视图上显示的内容？

【英文标题】：How do you change what gets displayed on a front-end (Angular) view based on properties in your JWT token?

【发布时间】：2017-01-24 23:06:11

【问题描述】：

我对使用令牌很陌生。昨天刚开始学习。

我有一个 Express 后端 API。我知道令牌会阻止任何人访问任何给定 API 端点/json 数据上的数据...但是当 JWT 位于角度端时，我该如何读取/解密它？

即，好的，我知道此用户已登录，因此可以查看此页面，但是，此特定用户是此事件的创建者。因此，在此活动的展示页面上，被邀请的用户可以查看，活动创建者也可以查看，但只有活动创建者会看到一个按钮，单击该按钮时，会对该活动进行删除请求。其他用户将看不到此按钮。

我认为这是可能的唯一方法是可以在前端/端解码包含用户对象的 JWT，然后我可以访问具有解码的 JWT 属性的变量。即，用户名和用户 ID。这样，在 Angular 中呈现的视图页面上，我可以编写如下逻辑代码： ```

if (decodedJWT.user.username === event.creator.username) 
 DO SOMETHING HERE LIKE DISPLAY A CERTAIN BUTTON

```

谢谢。

【问题讨论】：

解密令牌客户端首先破坏了使用 jwt 的全部目的。在服务器端做它并从那里传递任何需要的不敏感数据

JWT 可能会令人困惑，但 charlieftl 是正确的。您永远不想在客户端解码令牌。如果您还没有更好地理解，请重新阅读：jwt.io/introduction

添加到我的评论中，JWT 无法在没有密钥的情况下被解码。

Auth0 使用的 JWT-angular 之类的 Angular 服务怎么样，并让您能够在客户端解密它？只是好奇。

【参考方案1】：

您需要在您的 nodeJS 后端创建一个 API 点，如果他登录，它将返回用户详细信息：

app.use('/userinfo', expressJwt(secret: secret));

在此确保 /userinfo 受到 JWT 和您的密码短语的保护。

然后这个API对应的路由返回用户信息：

router.get('/get', function (request, response) 
  response.json(
    id: request.user.id,
    name: request.user.nom,
    email: request.user.email,
    role: request.user.role
  );
);

完整的 API 位于 /userinfo/get，由 JWT 令牌保护。

在 angularJS 中，您只需使用简单的$http.get('/userinfo/get') 向该 API 发出请求，如果未登录，它将返回用户对象或来自服务器的错误。

当然你需要pass the token to all your $http requests。

【讨论】：

很棒的描述，清楚地回答了这个问题。基本上，我会设置服务器以响应 json 用户对象。但是，只有当用户浏览到 /userinfo/get 路由时才会发送此用户对象数据。默认情况下，在 Angular 中，只有在我向该路由发出 $http.get 请求的控制器中，我才会拥有该数据。您如何建议让该用户 json 对象数据在我的整个前端 Angular 会话中“保留”？ IE。如果我在事件页面 (/events/8)...我想做一个条件 if (event.creator.id === user.id) do stuff

^ 我相信我只是在考虑后回答了我对上述评论的问题。如果有更简单的方法，请分享给社区。我的想法是：在 Angular 中，只需设置一个 userObjectCheck 工厂，该工厂对受保护的“/userinfo/get”路由执行请求，如果对象存在则返回该对象（如果用户已登录，角度拦截器将发送令牌自动每个请求，允许工厂访问工厂的端点）。现在，在我需要该用户的任何控制器中，我只需将变量设置为与工厂的返回值相等即可。

@Tyler 是的，工厂/服务是要走的路。