当前位置: 首页 > news >正文

学习ASP.NET Core的身份认证(基于JwtBearer的身份认证8)

  为进一步测试通过请求头传递token进行身份验证,在main.htm中增加layui的数据表格组件,并调用后台服务分页显示数据,后台分页查询数据接口如下所示(测试时,直接将数据写死到代码中,没有查询数据库),这里需注意返回的状态码需为0,其它值返回到前台都被认为是调用异常。

[Authorize]
[HttpGet]
public async Task<ApiResult> GetDataByPage(int page,int limit)
{ApiResult result = new ApiResult();result.StatusCode = 0;List<User> users = new List<User>();if(page==1){users.Add(new User { Name="张三",Age=12,Sex="男"});users.Add(new User { Name = "李四", Age = 32, Sex = "男" });users.Add(new User { Name = "王五", Age = 22, Sex = "男" });}else{users.Add(new User { Name = "李磊", Age = 12, Sex = "男" });users.Add(new User { Name = "韩梅梅", Age = 32, Sex = "女" });users.Add(new User { Name = "王巧", Age = 22, Sex = "男" });users.Add(new User { Name = "柳桥", Age = 45, Sex = "男" });}Users data = new Users();data.Data = users;data.Count = 20;result.Data = data;return result;
}

  main.html文件的JavaScript代码中使用table.render函数渲染表格数据,需要注意以下两点:
  1)render函数中通过设置headers属性添加并传递token,这点在layui的官网文档中没有写,百度相关内容才查到的,具体介绍请见参考文献1;
  2)后台数据查询接口返回数据格式与table模块的数据格式不一致,需设置数据映射,否则无法显示返回的数据集合。
  主要的JavaScript代码设置如下所示:

table.render({elem: '#data',height: 315,url: 'https://localhost:7051/Login/GetDataByPage' //数据接口,headers: {'Authorization': 'Bearer '+sessionStorage.getItem("token")},parseData: function(res){ // 数据映射处理return {"code": res.statusCode,"msg": res.msg,"count": res.data.count,"data": res.data.data };}    ,page: true ,cols: [[ {field: 'name', title: '用户名', width:80},{field: 'sex', title: '性别', width:80, sort: true},{field: 'age', title: '年龄', width:80}]]});

  身份认证成功后,分页显示数据的截图如下所示:
在这里插入图片描述
在这里插入图片描述
  未通过身份认证时,调用后台数据服务则直接显示请求异常,如下图所示:

  后续文章准备增加数据库查询,替换现在用户身份认证及数据查询都是写死到代码中的情况,同时搜索并查询基于Cookie传递token的实现方式(目前没找到多少有用的内容)。

参考文献:
[1]https://huaweicloud.csdn.net/63a56328b878a54545946043.html
[2]https://blog.csdn.net/yufengaotian/article/details/82190933

http://www.lryc.cn/news/524226.html

相关文章:

  • PyTorch使用教程(6)一文讲清楚torch.nn和torch.nn.functional的区别
  • React的应用级框架推荐——Next、Modern、Blitz等,快速搭建React项目
  • 基于GRU实现股价多变量时间序列预测(PyTorch版)
  • Java创建对象有几种方式?
  • Vue3初学之Element Plus Dialog对话框,Message组件,MessageBox组件
  • 基于Python机器学习的双色球数据分析与预测
  • 微软Win10 RP 19045.5435(KB5050081)预览版发布!
  • 使用 Parcel 和 NPM 脚本进行打包
  • HTML<center>标签
  • LatentSync本地部署教程:基于音频精准生成唇形高度同步视频
  • ES使用笔记,聚合分组后再分页,探索性能优化问题
  • VUE3 vite下的axios跨域
  • Mac下安装ADB环境的三种方式
  • 在Vue中,<img> 标签的 src 值
  • Kotlin基础知识学习(三)
  • 渗透测试之XEE[外部实体注入]漏洞 原理 攻击手法 xml语言结构 防御手法
  • 店铺营业状态设置(day05)
  • 游戏引擎学习第84天
  • 快手SDK接入错误处理经验总结(WebGL方案)
  • C语言 for 循环:解谜数学,玩转生活!
  • Node.js 与 JavaScript 是什么关系
  • Java 大视界 -- Java 大数据性能监控与调优:全链路性能分析与优化(十五)
  • 深入Spring Boot:自定义Starter开发与实践
  • React 中hooks之useTransition使用总结
  • 怎样使用树莓派自己搭建一套ADS-B信号接收系统
  • Chrome谷歌浏览器如何能恢复到之前的旧版本
  • 路由器旁挂三层网络实现SDWAN互联(爱快SD-WAN)
  • 代码随想录算法训练营第五十五天 |108.冗余连接 109.冗余连接Ⅱ
  • Unity补充 -- 协程相关
  • 【第二十周】U-Net:用于生物图像分割的卷积神经网络