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

Question

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

我不知道该怎么做是在我的$资源中设置角度的标题中传递此信息(用户/通行证).有没有完整的例子可以更好地告诉我如何做到这一点？我知道它涉及cookie并使用服务器传回的令牌,但我不知道如何将各个部分放在一起.

当我把所有这些结合在一起时,我希望通过所有层(DAL,RESTFUL,控制台测试层)发布一个完整的骨架示例.

所以问题是 - 在使用AngularJS $资源时,如何将身份验证信息插入客户端的标头中？

谢谢

Answer 1

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

如果你想在 Header 中传递令牌而不是在 Angular 端的 cxookie 中传递令牌，只需执行以下操作：$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 requests

希望能帮助到你