当前位置:   article > 正文

uni-app (安卓、微信小程序)接口封装 token失效自动获取新的token_uniapp 微信小程序token

uniapp 微信小程序token

一、文件路径截图

1、新建一个文件app.js存放接口

  1. //这里存放你需要的接口
  2. import {request} from '@/utils/request.js' //这个文件是请求逻辑处理
  3. module.exports = {
  4. // 登录 -- 注册
  5. perssonRegister: (data) => { // 供应商注册
  6. return request({
  7. url: 'manageWx/Login/perssonRegister',
  8. method: "post",
  9. data
  10. })
  11. }
  12. },

2、新建一个文件request.js

  1. const host = "http://192.168.1.10:8081/jeecg-boot/" //这个是本地地址,项目上线可以换成线上
  2. export const request = (options) => {
  3. console.log(options, `调用接口`)
  4. return new Promise((resolve, reject) => {
  5. const WXUSER = uni.getStorageSync('WXUSER');
  6. if (!options.url) {
  7. console.error('请传入URL')
  8. return;
  9. }
  10. if (!WXUSER.rememberToken) {
  11. wxlogin(options).then(() => {
  12. sendRequest(options, resolve, reject);
  13. });
  14. } else {
  15. sendRequest(options, resolve, reject);
  16. }
  17. })
  18. };
  19. //封装的发送请求函数
  20. function sendRequest(options, resolve, reject) {
  21. const WXUSER = uni.getStorageSync('WXUSER');
  22. uni.request({
  23. url: options.url,
  24. data: options.data || '',
  25. method: options.method || 'POST',
  26. header: {
  27. "X-Access-Token": WXUSER.rememberToken,
  28. },
  29. success: (res) => {
  30. if (res.data.code == 401) {
  31. console.log('返回401')
  32. wxlogin(options).then(() => {
  33. sendRequest(options, resolve, reject);
  34. });
  35. } else resolve(res.data)
  36. }
  37. })
  38. };
  39. // token失效请求微信的无痕登录 app 就换成自己的登录接口
  40. export async function wxlogin(options) {
  41. return new Promise((resolve, reject) => {
  42. uni.getUserInfo({
  43. success: (UserRes) => {
  44. uni.login({
  45. desc: 'weixin',
  46. success: res => {
  47. wx.request({
  48. url: `${host}manageWx/Login/queryUserByPhone`, //换成在自己登录接口
  49. method: 'POST',
  50. data: {
  51. weappCode: res.code,
  52. },
  53. success: res => {
  54. if (res.data.success) {
  55. console.log(res.data.result.wxUser)
  56. const WXUSER = res.data.result.wxUser
  57. const SYSUSER = res.data.result.sysUser
  58. uni.setStorageSync('WXUSER',WXUSER);
  59. uni.setStorageSync('SYSUSER',SYSUSER);
  60. resolve(); // 登录成功后,返回resolve
  61. } else {
  62. console.log('登录错误', res)
  63. reject(); // 登录失败时,返回reject
  64. }
  65. }
  66. });
  67. }
  68. });
  69. }
  70. })
  71. });
  72. };
  73. module.exports = {
  74. request,
  75. host
  76. }

3、页面使用

  1. <!--@ 商品列表 -->
  2. <template>
  3. </template>
  4. <script>
  5. import {perssonRegister} from '@/utils/app.js' //调用接口使用
  6. export default {
  7. name: "PlaceOrderGoods",
  8. data() {
  9. return {
  10. dataSource: [],
  11. };
  12. },
  13. onLoad() {
  14. this.loadData()
  15. },
  16. methods: {
  17. // 单位名称的数据
  18. async loadData() {
  19. const pames = {}
  20. await queryUnitName(pames).then(res => {
  21. if (res.code == 200) {
  22. this.dataSource= res.result
  23. }
  24. })
  25. .catch(err => {
  26. // 失败执行
  27. })
  28. .finally(() => {
  29. // 执行代码正确、报错都执行
  30. });
  31. },
  32. }
  33. };
  34. </script>
  35. <style lang="scss" scoped>
  36. </style>

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

闽ICP备14008679号