authentication - AngularJs -.net MVC WebApi 身份验证示例

Question

我有一个 .Net MVC WebApi 应用程序，并试图用 Angularjs 专门编写前端。我能够通过 json 获取数据并对其进行操作，但我现在需要保护数据并将 Base64 身份验证添加到服务器上的 header 中。当我浏览到我的一些 .net View 测试页面时，我得到了适当的登录框，要求输入用户/密码，以便我可以继续获取 json。

我不知道该怎么做是在 angular 在我的 $resource 中设置的 header 中传递此信息(用户/通行证)。有没有完整的例子可以更好地告诉我如何做到这一点？我知道它涉及 cookie 并使用服务器传回的 token ，但我不知道如何将这些部分放在一起。

当我把所有这些放在一起时，我希望通过所有层(DAL、RESTFUL、控制台测试层)发布一个完整的框架示例。

所以问题是 - 在使用 AngularJS $resources 时，如何将身份验证信息插入客户端的 header 中？

谢谢

Answer 1

如果你在服务器端的头部放置一个 cookie，AngularJS 会一直发送这个 cookie。你无事可做。

如果您想在 Angular 一侧的 cxookie 中而不是在 Header 中传递 token ，请执行以下操作:$httpProvider.defaults.headers.common['X-Auth'] = yourKey;在您的配置块中。

然后，如果您想知道用户是否已登录或他是否有权限，只需实现拦截器。这是一个简单的工厂，您将始终将 responseIntercetors 推送到您的配置块中。

该工厂将监听来自服务器的每个响应，在他的实现中，您将在错误情况下检查响应的状态代码:

401 --> 未登录
403 --> 未授权

工厂示例:

myModule.factory('myHttpInterceptor', function ($q) {
    return function (promise) {
        return promise.then(function (response) {
            // do something on success              
            return response;
        }, function (response) {
            // do something on error
            //check status 401 or 403
            return $q.reject(response);
        });
    };
});

然后把你的工厂放在你的配置块中的 http responseIntercetors 中:

myModule.config(function ($httpProvider) {
    $httpProvider.responseInterceptors.push('myHttpInterceptor');
});

请记住，该解决方案在 AngularJS 1.1.4 中已弃用(仍然不稳定)...

工厂必须有点不同，请参阅此帖子以获取更多信息: AngularJS Intercept all $http JSON responses

希望能帮助到你