如何在 angular js 中使用 JWT 调用 rest api

Question

我已经创建了一个 Web api，在 Web api 中使用基于 jwt 令牌的身份验证。我想用 angular js $http 调用 html 页面中的其余部分 api。我试过了，但它的显示请求失败了。我从邮递员工具得到响应，但在 webpage.dont 中知道如何在 header.

中传递不记名令牌

邮递员请求

GET /api/mp/dashboard HTTP/1.1
Host: localhost:55417
Authorization: Bearer eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiQWRtaW4iLCJleHAiOjE1NjA5NDcyMzMsImlzcyI6Im15c2l0ZS5jb20iLCJhdWQiOiJteXNpdGUuY29tIn0.SMTy2H5vmWWUgCytHEHfT847ipE2hCzk0wvP2Of60Uk

angularjs代码

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {                 
    $http.get("http://ip_address:3393/api/mp/dashboard", {
        headers: { 'Authorization': 'Bearer eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiQWRtaW4iLCJleHAiOjE1NjA5NDcyMzMsImlzcyI6Im15c2l0ZS5jb20iLCJhdWQiOiJteXNpdGUuY29tIn0.SMTy2H5vmWWUgCytHEHfT847ipE2hCzk0wvP2Of60Uk' }
    })
    .then(function (response) {
        $scope.myWelcome = response.data;
        $scope.fridgetemp = $scope.myWelcome.fridge_temp;       
    });
});

Answer 1

试试这个 Http get 调用，因为 headers 你必须在 object 中传递一个名为 Content-Type 的字段：'application/json' 以及授权

$http({
            method: "GET",
            url: 'http://ip_address:3393/api/mp/dashboard',
            headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiQWRtaW4iLCJleHAiOjE1NjA5NDcyMzMsImlzcyI6Im15c2l0ZS5jb20iLCJhdWQiOiJteXNpdGUuY29tIn0.SMTy2H5vmWWUgCytHEHfT847ipE2hCzk0wvP2Of60Uk'
            },
            data: '' //this field depends on coder.
        })
        .then(function (response) {
                //your success result code handling 
            },
            function (error) {
              //your error handling code
                }
            });

如何在 angular js 中使用 JWT 调用 rest api

how to call the a rest api using JWT in angular js

javascript

angularjs

asp.net-core-webapi

jwt-auth