当前位置:   article > 正文

微信小程序使用session(详细、亲测有效)_小程序获取session

小程序获取session

1、背景

        解决微信小程序session不能使用,session 不唯一问题。

        操作流程

1.调用登录请求

2.获取登录请求中的set-cookie 信息

3. 保存到本地缓存

4.每次调用加入请求头中

       例如: 微信小程序调用用户信息。

       login. wxml

  <button bindtap="getUserInfo">getUserInfo</button>

         login.js

  1. getUserInfo(){
  2. // 获取用户信息
  3. httpUtils.request({
  4. showLoading: true,
  5. url: `/user/get/login`,
  6. message: "正在获取用户数据..."
  7. }).then(res => {
  8. this.setData(
  9. res.data.data
  10. )
  11. ui.showToast(res.data.errorMsg)
  12. }).catch(err => {
  13. console.log('ERROR')
  14. });
  15. },

   控制台显示未登录44dc2dde48b8409ba6b48ebd3e416c86.png

发现后台没有session传入

076c8419e5e94b3eb747d3dc2c9cbfdb.png

2、步骤

        2.1首次请求

                首次请求获取 header 中的Set-Cookie 作为cookie信息

0e3aa109814744dc9675fe5d59ffcc1e.png

  直接开始登录流程

  1. wx.login({
  2. success: res => {
  3. // 发送 res.code 到后台换取 openId, sessionKey, unionId
  4. if (res.code) {
  5. //发起网络请求
  6. httpUtils.request({
  7. method: "GET", showLoading: true,url: `/wx/user/wxLogin`,message: "正在登录",
  8. data: {
  9. code: res.code
  10. }
  11. }).then(res => {
  12. if(res.header["Set-Cookie"]){
  13. wx.setStorageSync('sessionid', res.header["Set-Cookie"]);
  14. }
  15. this.globalData.userInfo = res.data.data
  16. ui.showToast(res.data.errorMsg)
  17. }).catch(err => {
  18. console.log('ERROR')
  19. });
  20. } else {
  21. console.log('登录失败!' + res.errMsg)
  22. }
  23. }
  24. })

   注意:每次重新登录前要删除缓存信息

        wx.removeStorageSync('sessionid') 

        2.2存入微信小程序缓存

  1. if(res.header["Set-Cookie"]){
  2. wx.setStorageSync('sessionid', res.header["Set-Cookie"]);
  3. }

           8f957a7b6b514384a4fa85026d42763e.pngSESSION=MjMxZDM3NmYtYzgzYy00NDc0LWExODYtOWRmODI0N2M1NTMy; Path=/api; HttpOnly; SameSite=Lax

        2.3将cookie加入请求头

  1. let header = {
  2. 'content-type': 'application/json', // 默认值
  3. }
  4. let session_id = wx.getStorageSync('sessionid');//本地取存储的sessionID
  5. if (session_id != "" && session_id != null) { //本地session存在,则放到header里
  6. header.Cookie = session_id;
  7. }

        2.4请求

                最后直接使用wx.request  API调用接口,大功告成。

           重新调用后0c054abe98074257a4767de12fb4a2bb.png

 0162930ac51f4105940f7a6dd0e3dd38.png

附录

httpUtils.js

  1. const ui = require('./ui');
  2. const BASE_URL = 'http://XXXXXX:8890/api'
  3. /**
  4. * 网络请求request
  5. * obj.data 请求接口需要传递的数据
  6. * obj.showLoading 控制是否显示加载Loading 默认为false不显示
  7. * obj.contentType 默认为 application/json
  8. * obj.method 请求的方法 默认为GET
  9. * obj.url 请求的接口路径
  10. * obj.message 加载数据提示语
  11. */
  12. function request(obj) {
  13. return new Promise(function (resolve, reject) {
  14. if (obj.showLoading) {
  15. ui.showLoading(obj.message ? obj.message : '加载中...');
  16. }
  17. var data = {};
  18. if (obj.data) {
  19. data = obj.data;
  20. }
  21. var contentType = 'application/json';
  22. if (obj.contentType) {
  23. contentType = obj.contentType;
  24. }
  25. var method = 'GET';
  26. if (obj.method) {
  27. method = obj.method;
  28. }
  29. let header = {
  30. 'content-type': 'application/json', // 默认值
  31. }
  32. let session_id = wx.getStorageSync('sessionid');//本地取存储的sessionID
  33. if (session_id != "" && session_id != null) { //本地session存在,则放到header里
  34. header.Cookie = session_id;
  35. }
  36. wx.request({
  37. url: BASE_URL + obj.url,
  38. data: data,
  39. method: method,
  40. //添加请求头
  41. header: header,
  42. contentType: contentType,
  43. //请求成功
  44. success: function (res) {
  45. console.log('===========================================================================================')
  46. console.log('== 接口地址:' + obj.url);
  47. console.log('== 接口参数:' + JSON.stringify(data));
  48. console.log('== 请求类型:' + method);
  49. console.log("== 接口状态:" + res.statusCode);
  50. console.log("== 接口数据:" + JSON.stringify(res.data));
  51. console.log('===========================================================================================')
  52. if (res.statusCode == 200) {
  53. resolve(res);
  54. } else if (res.statusCode == 401) {//授权失效
  55. reject("登录已过期");
  56. jumpToLogin();//跳转到登录页
  57. } else {
  58. //请求失败
  59. reject("请求失败:" + res.statusCode)
  60. }
  61. },
  62. fail: function (err) {
  63. //服务器连接异常
  64. console.log('==========================================================================================')
  65. console.log('== 接口地址:' + url)
  66. console.log('== 接口参数:' + JSON.stringify(data))
  67. console.log('== 请求类型:' + method)
  68. console.log("== 服务器连接异常")
  69. console.log('==========================================================================================')
  70. reject("服务器连接异常,请检查网络再试");
  71. },
  72. complete: function () {
  73. ui.hideLoading();
  74. }
  75. })
  76. });
  77. }
  78. //跳转到登录页 小程序每次启动登录 暂时没有登录页面
  79. function jumpToLogin() {
  80. }
  81. module.exports = {
  82. request,
  83. }

 ui.js

控制模态框

  1. export const showToast = function(content,duration) {
  2. if(!duration) duration = 2000
  3. wx.showToast({
  4. title: content,
  5. icon: 'none',
  6. duration: duration,
  7. })
  8. }
  9. var isShowLoading = false
  10. export const showLoading = function(title) {
  11. if(isShowLoading) return
  12. wx.showLoading({
  13. title: title?title:'',
  14. mask:true,
  15. success:()=>{
  16. isShowLoading = true
  17. }
  18. })
  19. }
  20. export const hideLoading = function() {
  21. if(!isShowLoading) return
  22. isShowLoading = false
  23. wx.hideLoading()
  24. }

 app.js

  1. // app.js
  2. const httpUtils = require('./utils/httpUtils')
  3. const ui = require('./utils/ui')
  4. App({
  5. onLaunch() {
  6. //删除缓存 重新登录 获取会话
  7. wx.removeStorageSync('sessionid')
  8. // 登录
  9. wx.login({
  10. success: res => {
  11. // 发送 res.code 到后台换取 openId, sessionKey, unionId
  12. if (res.code) {
  13. //发起网络请求
  14. httpUtils.request({
  15. method: "GET", showLoading: true,url: `/wx/user/wxLogin`,message: "正在登录",
  16. data: {
  17. code: res.code
  18. }
  19. }).then(res => {
  20. // 保存set-cookie到缓存中
  21. if(res.header["Set-Cookie"]){
  22. wx.setStorageSync('sessionid', res.header["Set-Cookie"]);
  23. }
  24. // 用户信息保存在全局变量
  25. this.globalData.userInfo = res.data.data
  26. ui.showToast(res.data.errorMsg)
  27. }).catch(err => {
  28. console.log('ERROR')
  29. });
  30. } else {
  31. console.log('登录失败!' + res.errMsg)
  32. }
  33. }
  34. })
  35. wx.getSystemInfo({
  36. success: e => {
  37. this.globalData.StatusBar = e.statusBarHeight;
  38. let custom = wx.getMenuButtonBoundingClientRect();
  39. this.globalData.Custom = custom;
  40. this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
  41. }
  42. })
  43. },
  44. globalData: {
  45. userInfo: null,
  46. }
  47. })

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/神奇cpp/article/detail/774447
推荐阅读
相关标签
  

闽ICP备14008679号