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

[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代码如下：

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