fm_mall项目

本文介绍了前端与后端的数据交互,包括JSON格式的处理、SSL报错的解决方案、VSCode快捷格式化、Vue的多环境开发和表格渲染。重点讨论了登录认证授权,涉及JWT token的校验,前端如何验证token有效,以及解决跨域和401错误的问题。同时,文章还涵盖了自定义403页面的实现以及全局配置Jackson以简化JSON序列化。
摘要由CSDN通过智能技术生成

1.前端传数据
如果前端穿的json格式为{
{
}
}

后端会将其转换为linkedhashmap,======》将其添加泛型
在这里插入图片描述

2.ssl报错
在这里插入图片描述
在这里插入图片描述
3.vscode操作:
格式化:alt+shift+f

4.vue多环境开发
在这里插入图片描述
5.vue表格自动渲染
在这里插入图片描述
6.前端将字符变为数字
在这里插入图片描述
7.前端上传图片改为img
在这里插入图片描述
8.批量删除和表单验证,需要获取表单里面的内容,使用ref定义一个表单名
在这里插入图片描述
获取被选中的row的内容
在这里插入图片描述
9.
vue上传图片回显上传的name必须为img
在这里插入图片描述
二、登录认证授权图解
在这里插入图片描述
security主要负责登录,认证和授权,jwt就是一个令牌,保存用户的基本信息而已

三、前端vue实现登录认证
1.修改登录请求路径
在这里插入图片描述
2.导入登录方法
在这里插入图片描述
3.点击登录进行跳转
在这里插入图片描述

三步操作做完之后存在问题,没有token也可以进行访问,因为security暂时只使用token对用户登录进行校验,没有使用token对用户登录状态进行校验,只要登录进来了,即使删掉token都可以访问。因此需要进一步解决

4.后端开发对token校验的接口,之前开发的Basic Authentication Filter对token的校验只是针对登录验证,现在需要登录状态的验证
1)开发后端verify接口.将token放在请求头中,@RequestHeader
在这里插入图片描述
2.这个请求也需要被放行,不然都走不到这里,会被过滤器链拦截,需要在security配置类和Basic Authentication Filter实现类进行放行
在这里插入图片描述
在这里插入图片描述
3.配置全局的header请求头
在这里插入图片描述

4.在user.js中设置请求路径,向后端发送请求验证token是否有效
在这里插入图片描述
5.在permission.js中引入user路径
在这里插入图片描述
6在permission.js中进行令牌验证
在这里插入图片描述
7.让permission生效必须得放开登录验证
在这里插入图片描述
四、解决前端没有数据显示,存在跨域问题。
跨域问题可能存在的两种情况:
(1)后端没有这个请求路径,本应404,但是因为跨域请求数据,所以会出现跨域的问题
(2)前端发送的请求需要走过滤器,security存在跨域限制

解决security跨域问题:
在这里插入图片描述
五、图片上传会存在401的bug(未登录),原因是图片上传组件没有经过request.js中的请求拦截器
解决:在上传组件中设置请求头
在这里插入图片描述
在这里插入图片描述
六、解决自定义403页面,没有权限就会跳转到403
1.添加403页面
在这里插入图片描述
2.配置路由
在这里插入图片描述
3.this代表vue实例,在request.js中不能使用this.router,因为request.js没有vue实例,需要引入router
1)引入router
在这里插入图片描述
七、从上下文中获取用户信息
在这里插入图片描述
八、全局配置jackson,不用加jsonFormat注解
在这里插入图片描述
九、

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值