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

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

javascript jquery angularjs json api

Javascript 如何在AngularJS中编写基本身份验证以在表中显示来自API的JSON数据？,javascript,jquery,angularjs,json,api,Javascript,Jquery,Angularjs,Json,Api,我有一个RESTAPI，它使用用户id和密码（123:123）进行基本身份验证，同时在js控制台中运行显示未经授权的代码。如何在函数中添加基本身份验证，以便像下面的代码一样对其进行授权 headers: {'Authorization': 'Basic ' + btoa("xxx:yyy")}, 我的代码 <body> <div ng-app="myApp" ng-controller="customersCtrl">

我有一个RESTAPI，它使用用户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>


{{x.name}
{{x.city}
var-app=angular.module（'myApp'，[]）；
app.controller（'customersCtrl'，函数（$scope，$http）{
$http.get（“https://example.com/name/data/1")
.then（函数（响应）{$scope.names=response.data.records；}）；
});

用户登录后，可以设置默认授权标题。并在用户注销时进行清理

       $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（）检查用户是否已登录

用户登录后，您可以设置默认授权标头。并在用户注销时进行清理

       $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（）检查用户是否已登录

使用拦截器，它将充当所有请求和响应的网关。因此，您可以在所有请求中添加所有标题。

选中此项使用拦截器，它将充当所有请求和响应的网关。因此，您可以在所有请求中添加所有标题。

选中此项

我是否应该用脚本编写所有这些内容。你能告诉我更多关于如何写这段代码吗？事实上，你知道我想要什么。我有一个具有基本身份验证的api。需要代码在div中显示数据。我应该在脚本中编写所有这些吗。你能告诉我更多关于如何写这段代码吗？事实上，你知道我想要什么。我有一个具有基本身份验证的api。需要代码在div中显示数据。