AngularJs -.net MVC的WebAPI认证范例 [英] AngularJs -.net MVC WebApi Authentication example

问题描述

我有一个.net MVC的WebAPI的应用程序，并试图独占写前端的Angularjs。我能够通过JSON获取数据和操作，但我现在需要保护的数据，并增加了Base64编码认证到服务器上的标头。当我浏览到我的一些.NET中测试页面，我得到相应的登录框，询问用户名/密码，所以我可以继续得到JSON。

I have a .Net MVC WebApi app and trying to write the front end exclusively in Angularjs. I am able to get data via json and manipulate it but I now need to secure the data and have added Base64 authentication into the headers on the server. When I browse to some of my .net view test pages, I get the appropriate login box asking for user/pass so I can continue to get the json.

我不知道该怎么做的是通过在头该信息（用户/密码）的角度是我的$资源设置。有没有完整的示例，可以更好地教我如何做到这一点？我知道它涉及饼干，并使用该标记的服务器传回，但我不知道如何把拼在一起。

What I don't know how to do is pass this info (user/pass) in the headers that angular is setting up in my $resource. Is there any complete examples that might better show me how to do this? I know it involves cookies and using the token the server passes back but I don't know how to put the pieces together.

当我得到这一切在一起，我希望发布的这个完整的骨架例如直通所有层（DAL，平安，控制台测试层）。

When I get all this together I hope to post a complete skeleton example of this thru all the layers (DAL, RESTFUL, console test layer).

所以，问题是 - ？使用An​​gularJS $资源时你怎么插入的身份验证信息到客户端上的标题

So the question is - how do you insert the authentication info into the headers on the client when using AngularJS $resources?

感谢

推荐答案

如果你把一个cookie在标题上服务器端AngularJS都会及时发出这个cookie ..ü什么都没有做。

If you put a cookie in the header on server side AngularJS will send this cookie all time.. U have nothing to do.

如果你想通过在头令牌不是在角侧cxookie只是这样做： $ httpProvider.defaults.headers.common ['X-验证'] = yourKey; 在你的配置块。

If you want to pass the token in Header not in cxookie on Angular side just do this : $httpProvider.defaults.headers.common['X-Auth'] = yourKey; in your config block.

然后，如果你想知道，如果用户登录，或者他有权利只实现了一个拦截器。这是一个简单的工厂，你会在responseIntercetors总是推在你的配置块。

Then if you want to know if the user is logged or if he's got the rights just implements an interceptor. It's a simple factory that you'll push in responseIntercetors always in your config block.

这个工厂将听从服务器上执行他的每一个响应您要检查错误情况下，响应的状态code：

This factory will listen each response from the server and on his implementation you'll check the status code of the response in error case :

401 - >没有登录
403 - >没有授权

401 --> not logged 403 --> not authorize

例如工厂的：

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像这样在你的CON图块：

Then put your factory in the http responseIntercetors like this in your con fig block:

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

只要记住这个解决方案是AngularJS 1.1.4（仍然是不稳定的）pcated德$ P $ ...

Just keep in mind this solution is deprecated in AngularJS 1.1.4 (still unstable) ...

在出厂前均会略有不同只是参考这篇文章以了解更多信息：<一href=\"http://stackoverflow.com/questions/11956827/angularjs-intercept-all-http-json-responses\">AngularJS拦截所有的$ HTTP JSON响应

The factory have to be a little different just refer to this post for more information : AngularJS Intercept all $http JSON responses

希望它能帮助

这篇关于AngularJs -.net MVC的WebAPI认证范例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！