学习ASP.NET Core的身份认证（基于JwtBearer的身份认证7）

本文验证基于请求头中传递token信息的认证方式，webapi项目的控制器类中新建如下函数，仅通过验证的客户端能调用，需要客户端请求在Header中添加'Authorization': 'Bearer token'的键值对且通过token验证后才能调用。

csharp 复制代码

[Authorize]
[HttpGet]
public async Task<ApiResult> DataTest(string userName)
{
    ApiResult result = new ApiResult();            
    result.Msg = "Hello,"+userName;
    return result;
}

新增main.html页面，登录页面登录成功后通过设置window.location.href属性跳转到main.html页面，后者中主要功能包括：
1）从本地sessionStorage中读取并显示当前用户名；
2）点击按钮能够查看本地token数据（也是从sessionStorage中读取）；
3）目前没看到太好的""退出登录"方式，就加了个退出按钮，点击后删除sessionStorage的数据，并跳转回登录页面；
4）输入一段文字，点击"调用服务"按钮，调用后台的DataTest函数并显示返回结果。
main.html页面的主要js代码如下：

javascript 复制代码

layui.use(['layer', 'form'], function () {
            var layer = layui.layer;            
            $ = layui.jquery;
            
            $(".userName").html(sessionStorage.getItem("user"));    
            
            $("#viewToken").click(function () {
                layer.msg("当前用户Token为：" + sessionStorage.getItem("token"));
            });

            $("#quit").click(function () {
                layer.confirm('确定要退出吗？', function(index){
                            //用户点击了确认按钮
                            layer.close(index);
                            sessionStorage.removeItem("user");
                            sessionStorage.removeItem("token");
                            window.location.href = "./login.html";
                        }, function(index){
                            //用户点击了取消按钮
                            layer.close(index);
                        });
            });

            $("#invokeSrv").click(function () {
                var urlAddress='https://localhost:7051/Login/DataTest?userName='+$("#inputText").val();

                $.ajax({
                    type: 'GET',
                    url: urlAddress,  
                    headers: {
                                'Authorization': 'Bearer '+sessionStorage.getItem("token"),  // 自定义的授权头部字段
                                'Content-Type': 'application/json' 
                            },                                     
                    success: function (result) {                        
                        if (result.statusCode == 200) {
                            layer.msg(result.msg);
                        }
                        else
                        {
                            layer.msg("调用失败，错误消息为：" + result.msg);
                        }                        
                    },
                    error: function () {
                        layer.msg("调用失败");                        
                    }
                });
            });
        });

最后是程序运行效果截图（界面比较丑，没怎么处理，主要是验证功能），

如果不登录直接访问main.html，则点击调用服务会因身份验证不通过而调用失败。

参考文献：

$1$ https://www.jianshu.com/p/a2804e72d296

$2$ https://blog.csdn.net/sD7O95O/article/details/85043160

$3$ https://www.cnblogs.com/qiongkangle/p/13347283.html

$4$ https://www.cnblogs.com/xbhp/p/17401507.html

$5$ https://www.cnblogs.com/superstar/p/16491428.html

$6$ https://blog.csdn.net/weixin_44877917/article/details/140609294

$7$ https://blog.csdn.net/qq_40287041/article/details/143368882