Authentication KnockoutJS+WebAPI 2令牌身份验证-在令牌过期之前保持登录状态

我对基于令牌的身份验证相当陌生，在登录后如何维护登录状态是个问题。 我想创建一个SPA网站，我使用Knockoutjs作为前端，SammyJS用于路由和更改视图。 登录并获取令牌后，我将其存储在localStorage中，并将用户名设置为我正在显示的可观察值

我的问题是，在我关闭选项卡或浏览器并返回站点后，令牌位于localStorage中，但我看不到用户登录。 我想保持登录状态，直到令牌过期。我的问题是，当我进入站点时，我应该如何使用本地存储中的令牌来维护该用户的登录状态

我是否需要在startup类中制作一些东西，或者检查数据库中是否存在该用户

提前谢谢

这是我的密码：

StartupAuth.cs

更新

这也是我的路线

var appRoot = root;

(function ($) {
    var app = $.sammy('#page', function () {
        this.get('#/home', function (context) {
            document.title = 'Home - ' + title;
            var url = getUrlFromHash(context.path);
            loadView(url, new MainViewModel(), MainApp);
            //context.load(url).swap();
        });
        this.get('#/about', function (context) {
            var url = getUrlFromHash(context.path);
            loadView(url, new AboutViewModel(), AboutApp);
        });
        this.get('#/manage', function (context) {
            var url = getUrlFromHash(context.path);
            loadView(url, new AboutViewModel(), AboutApp);
        });
    });
    $(function () {
        app.run('#/home');
    });
})(jQuery);
function loadView(url, viewModel, callback) {
    $.get(url, function (response) {
        var $container = $('#page');
        //var $view = $('#page').html(response);
        $container.html(response);
        callback();
    });
}
function getUrlFromHash(hash) {
    var url = hash.replace('#/', '');
    if (url === appRoot)
        url = 'home';
    return url;
}

---

现在，您所做的只是将用户的凭据存储在localStorage中，而不是使用它们执行授权。另一种选择是使用Sammy.OAuth2插件，您可以找到它

您可以定义一个路由来进行身份验证，如下所示：

app.post("#/oauth/login", function(context) {
    this.load('http://yourwebsite/login',
        {
            cache: false, 
            type: 'post',
            data: {
                email: $("input[name=email]").val(), 
                password: $("input[name=password]").val()
            }
        })
        .then(function(content) {
            if(content != false){
                if(app.getAccessToken() == null){
                    app.setAccessToken(token());
                }
            }else{
                app.trigger("oauth.denied");
                return false;
            }
        });
});

在“受保护”路由中，您可以检查用户是否已按以下方式登录：

app.get("#/profile", function(context) {

    if(app.getAccessToken() != null)
        context.render('view/profile.template');
    else
        this.requireOAuth();

});

---

必须根据您的场景修改此示例以填充令牌。这是一个完整的教程。

感谢您的回复，我正在使用从弹出窗口发送到控制器的登录，“/oauth/login”是到控制器的路径，对吗？我需要在回家的路上检查一下，对吗？这有点不清楚。没错-在第一个代码片段中，您正在向服务器（即Wep API控制器）发送“电子邮件”和“密码”，请求发送到/oauth/login。第二个代码段定义了一个路由，用于检查用户是否已通过身份验证。如果是这种情况，那么用户将被引导到所需页面，即view/profile.templateOk，谢谢！还有一件事，我可以在按钮点击上使用的第一个片段，用于将其发送到控制器？因为对于登录/注册，我没有像其他页面/关于那样使用任何url，它只是一个弹出窗口，在一个按钮上，我将数据发送给控制器。所以我不太确定如何使用这种方法。类似于我发布了网站的路由部分，但是我没有使用get而是使用post？提前谢谢！是的，一种替代方法是创建一个自定义绑定，用于检查app.getAccessToken是否有效

var appRoot = root;

(function ($) {
    var app = $.sammy('#page', function () {
        this.get('#/home', function (context) {
            document.title = 'Home - ' + title;
            var url = getUrlFromHash(context.path);
            loadView(url, new MainViewModel(), MainApp);
            //context.load(url).swap();
        });
        this.get('#/about', function (context) {
            var url = getUrlFromHash(context.path);
            loadView(url, new AboutViewModel(), AboutApp);
        });
        this.get('#/manage', function (context) {
            var url = getUrlFromHash(context.path);
            loadView(url, new AboutViewModel(), AboutApp);
        });
    });
    $(function () {
        app.run('#/home');
    });
})(jQuery);
function loadView(url, viewModel, callback) {
    $.get(url, function (response) {
        var $container = $('#page');
        //var $view = $('#page').html(response);
        $container.html(response);
        callback();
    });
}
function getUrlFromHash(hash) {
    var url = hash.replace('#/', '');
    if (url === appRoot)
        url = 'home';
    return url;
}

app.post("#/oauth/login", function(context) {
    this.load('http://yourwebsite/login',
        {
            cache: false, 
            type: 'post',
            data: {
                email: $("input[name=email]").val(), 
                password: $("input[name=password]").val()
            }
        })
        .then(function(content) {
            if(content != false){
                if(app.getAccessToken() == null){
                    app.setAccessToken(token());
                }
            }else{
                app.trigger("oauth.denied");
                return false;
            }
        });
});

app.get("#/profile", function(context) {

    if(app.getAccessToken() != null)
        context.render('view/profile.template');
    else
        this.requireOAuth();

});