豫ICP备17040950号-2

小程序保持登录状态方案

js前端微信小程序
文章目录
  1. 1. 登录态维护
  2. 2. 解决办法：
    1. 2.1. 自定义
      1. 2.1.1. 1、在用户登录时，服务端将用户的sessionId返回。
      2. 2.1.2. 2、小程序保存sessionId到本地，在之后的每次请求中在请求头中携带sessionId
        1. 2.1.2.1. 2.1、第一种方式：保存sessionId到全局变量App.js
        2. 2.1.2.2. 2.2、第二种方式：保存sessionId到storage
    2. 2.2. 常规方式
    3. 2.3. 清除cookie
      1. 2.3.1. 方式一的清除
      2. 2.3.2. 方式二的清除

微信小程序的运行环境不是在浏览器下运行的。所以不能以cookie来维护登录态。同时由wx.request()发起的每次请求对于服务端来说都是不同的一次会话，微信小程序不会把session信息带回服务端，
即对应服务端不同的session，由于项目中使用session保存用户信息所以导致后续请求相当于未登录的情况。下面我就来说说我根据官方给出的方法来写出的维护登录态的方法吧。

登录态维护

官方的文档地址：https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html#wxloginobject

通过 wx.login() 获取到用户登录态之后，需要维护登录态。开发者要注意不应该直接把 session_key、openid 等字段作为用户的标识或者 session 的标识，
而应该自己派发一个 session 登录态（请参考登录时序图）。对于开发者自己生成的 session，应该保证其安全性且不应该设置较长的过期时间。session 派发到小程序客户端之后，
可将其存储在 storage ，用于后续通信使用。
小程序登录时序图.png

由于正常情况下，客户端向服务端发起请求时，session信息是存放在cookie中以请求头的方式带回给服务端的，而请求头中具体的信息就是session的id，如下图所示
cookie.jpg

标红的就是我们需要在请求时携带返回给服务端的请求头 所以我们需要的就是这个JESSIONID的值了。刚好，微信小程序也提供了对请求头的支持。

解决办法：

自定义

1、在用户登录时，服务端将用户的sessionId返回。

服务端关键代码：

1
2
3
4
//获取sessionId的方法，只要获得request对象就可以轻松获取到了(也可以是服务端逻辑处理之后的某个字段比如token)
Sting sessionId = request.getSession().getId();
...    //登录时的业务代码
response.getWriter.write(sessionId); //把sessionId返回给前台

2、小程序保存sessionId到本地，在之后的每次请求中在请求头中携带sessionId

2.1、第一种方式：保存sessionId到全局变量App.js

​
小程序端登录后，把sessionId存入全局变量，app.js中是个存放全局变量的好地方。
​ 

1
2
//登录后的逻辑处理...
getApp().globalData.header.Cookie = 'JSESSIONID=' + _data.sessionId;

app.js中代码

1
2
3
4
globalData:{
	header:{'Cookie': ''} 
	//这里还可以加入其它需要的请求头，比如'x-requested-with': 'XMLHttpRequest'表示ajax提交，微信的请求时不会带上这个的
},

小程序端请求时带上sessionId

1
2
3
4
5
6
7
8
var header = getApp().globalData.header; //获取app.js中的请求头
wx.request({
		url: "localhost:8080/xx/xx",
		header: header, //请求时带上这个请求头
		success:function(res){
		
	　　 }
}
2.2、第二种方式：保存sessionId到storage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//登录后的逻辑处理...
		
//同步设置
wx.setStorageSync('sessionId', 'JSESSIONID='+res.data.sessionId);
		
//异步设置
wx.setStorage({
	key: 'sessionId',
		data: 'JSESSIONID='+res.data.sessionId,
		success: function (res) {
		console.log(res)
	}
});

小程序端请求时带上sessionId

1
2
3
4
5
6
7
var sessionId = wx.getStorageSync('sessionId');
	wx.request({
		url: "localhost:8080/xx/xx",
		'Cookie': sessionId, //请求时带上这个请求头
		success:function(res){
	}
}

常规方式

常规方式呢，就是后台把数据放在响应头里，即Response Header，这个里面会有我们需要持久化的信息，即Set-Cookie字段。
当然也可能是在header平级的cookies字段里，视情况而定。

以Set-Cookie为例，其实思想与方式一是一样的，只不过取值方式有点差别而已。

1.取值并存储

1
2
3
4
5
6
if (res.statusCode == 200) {
	if (res.header['Set-Cookie'] != '') {
		wx.setStorageSync('Set-Cookie', res.header['Set-Cookie'])
	}
	...
}

2.配置请求头

1
2
3
4
header: {
	'content-type': 'application/x-www-form-urlencoded',
	'cookie': wx.getStorageSync('Set-Cookie')
},

清除cookie

方式一的清除

因为是定义的变量存储，直接把变量值置空就可以了

1
app.globalData.cookie = ' '

方式二的清除

其实方式二也涉及到存储的知识点了，即有set、get，那也有remove，在需要的地方调用即可

1
wx.removeStorageSync('Set-Cookie')