angularjs - 使用 AngularJs、WebAPI 和 OAuth2 时以明文形式获取用户角色以及 JWT

Question

我在WebAPI项目中使用OAuth2。我正在 OWIN 中间件中验证用户请求。身份验证成功后，我将向客户端发送 JWT 访问 token 。现在我可以在服务器上验证后续请求并在 Api Controller 上使用 [Authorize(Roles="myRole")] 属性。

但是如何在 AngularJs 中显示验证客户端内容并根据用户 Angular 色显示页面？我在客户端有 JWT，但不知道如何从中获取用户 Angular 色？

这是从 JWT 中提取信息的好方法吗？

Answer 1

您需要解析该 JWT 并获取值。您可以在 angular-jtw 库的帮助下做到这一点。

1) 下载 angular-jwt.min.js ( https://github.com/auth0/angular-jwt )

2)在应用程序模块上添加“angular-jwt”的依赖:

var app = angular.module("YOUR_APP", ["angular-jwt"]);

3)将 jwtHelper 传递到您的服务或 Controller 或您希望使用它的任何地方。

    app.module.factory("YOUR_SERVICE", function(jwtHelper){
    ...
});

4)使用您传入的jwtHelper的decodeToken方法来解码您的 token

例如，下面的代码从我的服务端点返回的 jwt 中解析出 Angular 色对象。从服务器成功返回后，将从 jwt 中提取 Angular 色并返回。

return $http.post(serviceEndPoints.tokenUrl, data, config)
                    .then(function (response) {
                        var tokenPayLoad = jwtHelper.decodeToken(response.data.access_token);

//Now do whatever you wish with the value. Below I am passing it to a function: (determineRole)

                        var userRole = determineRoles(tokenPayLoad.role);


            return userRole;
        });
    };

希望有帮助

//胡迪尼