Question

我有一个其他API，它具有用户ID和密码（123：123）的基本身份验证，而我正在运行代码，在js控制台中显示未授权。如何在功能中添加基本身份验证，以便像这段代码一样授权

 headers: {'Authorization': 'Basic ' + btoa("xxx:yyy")},

我的代码

   <body>

        <div ng-app="myApp" ng-controller="customersCtrl">

            <table>
                <tr ng-repeat="x in names">
                    <td>{{ x.name }}</td>
                    <td>{{ x.city }}</td>

                </tr>
            </table>

        </div>

        <script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope, $http) {

        $http.get("https://example.com/name/data/1")

        .then(function (response) {$scope.names = response.data.records;});
    });
        </script>

    </body>

Answer 1

您可以在用户登录后设置默认授权标头。当用户退出时，清理它。

       $http.defaults.headers.common['Authorization'] = 'Basic ' + login + ':' +    password);

您可以使用一些方法定义工厂服务来管理登录状态。

.factory('AuthenticationService', function($q, $http) {

    var loggedIn = false;

    var service = {
        login: function(credentials) {

            var def = $q.defer();
            $http.post('loginURL')

            .then(
                function(response) {
                    $http.defaults.headers.common.Authorization = response.header;
                    loggedIn = true;
                },
                function(response) {
                    return def.reject(response);
                }
            );
            return def.promise
        },

        isLoggedIn: function() {
            return loggedIn;
        },

        logout: function() {
            loggedIn = false;
            delete $http.defaults.headers.common.Authorization;
        }
    };

    return service;
})

例如，在您的控制器中，您可以使用AuthenticationService.isLoggedIn（）来检查用户是否已记录。

Answer 2

使用拦截器，这将成为您所有请求和响应的网关。所以你可以在所有请求中添加所有标题。请检查此http://onehungrymind.com/winning-http-interceptors-angularjs/

如何在AngularJS中编写基本身份验证来显示来自表中API的JSON数据？

2 个答案: