mirror of
https://gitee.com/dromara/sa-token.git
synced 2026-02-27 16:50:24 +08:00
3.5 KiB
3.5 KiB
无cookie模式
何为无cookie
- 常规PC端鉴权方法,一般由
cookie进行 - 而
cookie有两个特性:1、可由后端控制写入,2、每次请求自动提交 - 这就使得大多数web前端码农,无需任何特殊操作,就能完成鉴权的流程(因为整个流程都是后端控制完成的)
- 而在app、小程序等前后台分离场景中,是没有
cookie这一功能的,此时大多数人都会一脸懵逼,咋进行鉴权啊 - 其实很简单
- 不能后端控制写入了,就前端自己写入(难点在如何将token传递到前端)
- 每次请求不能自动提交了,那就手动提交(难点在前端如何将token传递到后端,同时后端将其读取出来)
将token传递到前端
- 首先调用
StpUtil.setLoginId(Object loginId)进行登录 - 调用
StpUtil.getTokenInfo()返回当前会话的token值- 此方法返回一个对象,其有两个关键属性:
tokenName和tokenValue(token的名称和token的值) - 将此对象传递到前台,让前端人员将这两个值保存到本地
- 此方法返回一个对象,其有两个关键属性:
前端将token提交到后端
- 无论是app还是小程序,其传递方式都大同小异
- 那就是,将
token塞到请求header里 ,格式为:{tokenName: tokenValue} - 以经典跨端框架
uni-app为例:
方式1,简单粗暴
// 1、首先在登录时,将 tokenValue 存储在本地,例如:
uni.setStorageSync('tokenValue', tokenValue);
// 2、在发起ajax请求的地方,获取这个值,并塞到header里
uni.request({
url: 'https://www.example.com/request', // 仅为示例,并非真实接口地址。
header: {
"content-type": "application/x-www-form-urlencoded",
"satoken": uni.getStorageSync('tokenValue') // 关键代码
},
success: (res) => {
console.log(res.data);
}
});
方式2,更加灵活
// 1、首先在登录时,将tokenName和tokenValue一起存储在本地,例如:
uni.setStorageSync('tokenName', tokenName);
uni.setStorageSync('tokenValue', tokenValue);
// 2、在发起ajax的地方,获取这两个值, 并组织到head里
var tokenName = uni.getStorageSync('tokenName'); // 从本地缓存读取tokenName值
var tokenValue = uni.getStorageSync('tokenValue'); // 从本地缓存读取tokenValue值
var header = {
"content-type": "application/x-www-form-urlencoded" // 防止后台拿不到参数
};
if (tokenName != undefined && tokenName != '') {
header[tokenName] = tokenValue;
}
// 3、后续在发起请求时将 header 对象塞到请求头部
uni.request({
url: 'https://www.example.com/request', // 仅为示例,并非真实接口地址。
header: header,
success: (res) => {
console.log(res.data);
}
});
- 只要按照如此方法将
token值传递到后端,sa-token就能像传统PC端一样自动读取到token值,进行鉴权 - 你可能会有疑问,难道我每个
ajax都要写这么一坨?岂不是麻烦死了- 你当然不能每个
ajax都写这么一坨,因为这种重复代码都是要封装在一个函数里统一调用的
- 你当然不能每个
其它解决方案?
- 如果你对
cookie非常了解,那你就会明白,所谓cookie,本质上就是一个特殊的header参数而已, - 而既然它只是一个
header参数,我们就能就能手动模拟实现它,从而完成鉴权操作 - 这其实是对无
cookie模式的另一种解决方案,有兴趣的同学可以百度了解一下,在此暂不赘述