ASP.Net WebAPI Owin authentication token in Knockout 在Knockout中使用ASP.Net WebAPI Owin身份验证令牌

我正在尝试创建一个演示项目，使用.Net ASP.Net WebAPI和KnockoutJs作为前端。我已经创建了监听/token post的控制器方法，并验证用户并返回一个token。这是通过Knockout View Model的Ajax Post完成的。

这段代码是有效的。然而，当我从webApi收到200（成功）后，我会重定向到一个带有[Authorize]修饰的控制器方法，然后遇到401-未授权的问题。

Login()
    {
        var data = {
            username : this.login.emailAddress(),
            password : this.login.password(),
            RememberMe: this.login.rememberMe(),
            grant_type: "password"
        }
        return $.ajax({
            type: "POST",
            data: data,
            dataType: "json",
            url: "/token",
            contentType: "application/json"
        }).done((reply) => {
            window.location.href = "/Home/AnotherThing";
        });
    }

我认为问题是，我从我的/token（登录）调用中得到了一个响应，但对它什么也没做。我不确定该怎么处理token。我愚蠢地以为OAuth会以某种方式将token放入我的头部，它们会以神奇的方式存在那里。我错了。

所以，我一直在寻找一个例子，我能找到的最好的例子是这里

但这意味着我将在每个视图模型上重复很多代码。

提取：

function ViewModel() {  
    var self = this;  
    var tokenKey = 'accessToken';  
    var RefTokenKey = 'refreshToken';  
    self.result = ko.observable();  
    self.user = ko.observable();  
    self.token = ko.observable();  
    self.refreshToken = ko.observable();  
    function showError(jqXHR) {  
        self.result(jqXHR.status + ': ' + jqXHR.statusText);  
    }  
    self.callApi = function () {  
        self.result('');  
        var token = sessionStorage.getItem(tokenKey);  
        var headers = {};  
        if (token) {  
            headers.Authorization = 'Bearer ' + token;  
        }  
        $.ajax({  
            type: 'GET',  
            url: '/api/values',  
            headers: headers  
        }).done(function (data) {  
            self.result(data);  
        }).fail(showError);  
    }  
    self.callToken = function () {  
        self.result('');  
        var loginData = {  
            grant_type: 'password',  
            username: self.loginEmail(),  
            password: self.loginPassword()  
        };  
        $.ajax({  
            type: 'POST',  
            url: '/Token',  
            data: loginData  
        }).done(function (data) {  
            self.user(data.userName);  
            // Cache the access token in session storage.  
            sessionStorage.setItem(tokenKey, data.access_token);  
            var tkn = sessionStorage.getItem(tokenKey);  
            $("#tknKey").val(tkn);  
        }).fail(showError);  
    }  
}  
var app = new ViewModel();  
ko.applyBindings(app);

这似乎是我缺少的一部分：

sessionStorage.setItem(tokenKey, data.access_token);  
                var tkn = sessionStorage.getItem(tokenKey);  
                $("#tknKey").val(tkn);  

我需要每个视图模型都有代码去sessionStorage，然后获取token吗？

所以，这段代码：

var token = sessionStorage.getItem(tokenKey);  
        var headers = {};  
        if (token) {  
            headers.Authorization = 'Bearer ' + token;  
        }  
        $.ajax({  
            type: 'GET',  
            url: '/api/values',  
            headers: headers  
        }).done(function (data) {  
            self.result(data);  
        }).fail(showError);  
    } 

看起来是很多代码.. 这是正确的做法吗？