【微信小步伐】用户房屋管理

一、refresh_token

记任命户登录状态的 token 的有用时间被设置成了8个小时，高出8小时后将不再保持登录的状态了，此种情况下除了让用户重新举行登录外尚有一种体验更好的方式，即 refresh_token。
在调用登录接口乐成后会返回 token 和 refreshToken 当 token 有用时间设置了 8 个小时，refreshToken 有用时间设置了 3 天，当 token 失效后 refreshToken 仍旧有用，此时可以通过 refreshToken 来为 token 续期，所谓的续期就是调用后端提供的一个接口，然后把 refreshToken 发送给服务端，服务端重新返回新的 token 和 refreshToken。
1.1 革新 token

  

• 判定当前的 token 有没有失效可以根据接口返回的状态码举行判定，当 token 失效后会返回 401，在相应拦截器中可以同一获取全部接口返回的状态码，然后对其举行判定：
  
  1. // utils/http.js
  2. // 配置响应拦截器
  3. http.intercept.response = async function ({
  4.       
  5.        data, config }) {
  6.      
  7.      
  8.   // 如果状态码为401，则表明token已失效
  9.   if (data.code === 401) {
  10.      
  11.      
  12.     // 获取应用实例来读取 refreshToken
  13.     const app = getApp()
  14.     console.log(app.refreshToken)
  15.   }
  16.   // 只保留data数据，其它的都过滤掉
  17.   return data
  18. }

  复制代码
  要想通过应用实例 getApp 来读取 refreshToken 必须提前读取当地存储的数据并存储到应用实例当中：
  
  1. // app.js
  2. App({
  3.      
  4.      
  5.   onLaunch() {
  6.      
  7.      
  8.     // 读取 token
  9.     this.getToken()
  10.   },
  11.   getToken() {
  12.      
  13.      
  14.     // 读取本地的token
  15.     this.token = wx.getStorageSync('token')
  16.     this.refreshToken = wx.getStorageSync('refreshToken')
  17.   },
  18. })

  复制代码
  
  
• 调用接口把 refreshToken 发送给服务端变更新的 token 和 refreshToken
  接口文档地点
  接口中所必要的接口 refreshToken 必要通过自界说的头信息 Authorization 来通报：
  
  1. // utils/http.js
  2. // 配置响应拦截器
  3. http.intercept.response = async function ({
  4.       
  5.        data, config }) {
  6.      
  7.      
  8.   // 如果状态码为401，则表明token已失效
  9.   if (data.code === 401) {
  10.      
  11.      
  12.     // 获取应用实例
  13.     const app = getApp()
  14.     // 1.1 调用接口获取新的 token
  15.     const res = await http({
  16.      
  17.      
  18.       url: '/refreshToken',
  19.       method: 'POST',
  20.       header: {
  21.      
  22.      
  23.         Authorization: 'Bearer ' + app.refreshToken,
  24.       },
  25.     })
  26.     // 检测接口是否调用成功
  27.     if (res.code !== 10000) return wx.utils.toast('更新token失败!')
  28.     // 重新存储新的 token
  29.     app.setToken('token', res.data.token)
  30.     app.setToken('refreshToken', res.data.refreshToken)
  31.   }
  32.   // 只保留data数据，其它的都过滤掉
  33.   return data
  34. }

  复制代码
  在获取新的 token 和 refreshToken 后必要将原来已经失效的 token 和 refreshToken 更换掉，即再次调用 app.setToken 来更新数据。
  
  

1.2 无感哀求

在实际的应用中在调用某个接口时才会知道 token 是否已经逾期，这种情况我们去革新了 token ，但是原接口调用的数据我们并不能立即获取到，为了办理这个标题我们可以在革新 token 乐成后，自动的再去把原来的接口调用一次来获取数据，对于用户来说感觉不到 token 曾以失效过，我们将这种处理处罚方式叫成了无感哀求（这是我自已起的名字，各人重点明白这个名称背后的实现逻辑即可）。

1. // 配置响应拦截器
2. http.intercept.response = async function ({
3.    
4.      data, config }) {
5.    
6.    
7.   // 如果状态码为401，则表明token已失效
8.   if (data.code === 401) {
9.    
10.    
11.     // 获取应用实例
12.     const app = getApp()
13.     // 1.1 调用接口获取新的 token
14.     const res = await http({
15.    
16.    
17.       url: '/refreshToken',
18.       method: 'POST',
19.       header: {
20.    
21.    
22.         Authorization: 'Bearer ' + app.refreshToken,
23.       },
24.     })
25.     // 检测接口是否调用成功
26.     if (res.code !== 10000) return wx.utils.toast('更新token失败!')
27.     // 重新存储新的 token
28.     app.setToken('token', res.data.token)
29.     app.setToken('refreshToken', res.data.refreshToken)
31.     // 1.2 获取到原来接口请求的参数
32.     config = Object.assign(config, {
33.    
34.    
35.       header: {
36.    
37.    
38.         // 更新后的 token
39.         Authorization: 'Bearer ' + res.data.token,
40.       },
41.     })
42.     // 重新发请求
43.     return http(config)
44.   }
45.   // 只保留data数据，其它的都过滤掉
46.   return data
47. }

复制代码

重新发起哀求时 config 中包罗的是旧的失效的 token，我们必要用新的 token 覆盖掉原有哀求参数中的自界说头信息 Authorization ：

1. // 获取到原来接口请求的参数
2. config = Object.assign(config, {
3.    
4.    
5.   header: {
6.    
7.    
8.     // 更新后的 token
9.     Authorization: 'Bearer ' + res.data.token,
10.   },
11. })

复制代码

1.3 重新登录

革新 token 完成后我们必要进一步的分析，假如 refreshToken 也失效了怎么办？（用户高出3天都没有打开过小步伐的情况下），这种情况下就只能让用户重新举行登录了，即跳转到登录页面即可：

1. // 配置响应拦截器
2. http.intercept.response = async function ({
3.    
4.      data, config }) {
5.    
6.    
7.   // 如果状态码为401，则表明token已失效
8.   if (data.code === 401) {
9.    
10.    
11.     // 获取应用实例
12.     const app = getApp()
13.     // 1.3 状态为 401 且接口为 /refreshToken 表明 refreshToken 也过期了
14.     if (config.url.includes('/refreshToken')) {
15.    
16.    
17.       // 获取当前页面的路径，保证登录成功后能跳回到原来页面
18.       const pageStack = getCurrentPages()
19.       const currentPage = pageStack.pop()
20.       const redirectURL = currentPage.route
21.       // 跳由跳转（登录页面）
22.       return wx.redirectTo({
23.    
24.    
25.         url: '/pages/login/index?redirectURL=/' + redirectURL,
26.       })
27.     }
28.     // 1.1 调用接口获取新的 token
29.     const res = await http({
30.    
31.    
32.       url: '/refreshToken',
33.       method: 'POST',
34.       header: {
35.    
36.    
37.         Authorization: 'Bearer ' + app.refreshToken,
38.       },
39.     })
40.     // 检测接口是否调用成功
41.     if (res.code !== 10000) return wx.utils.toast('更新token失败!')
42.     // 重新存储新的 token
43.     app.setToken('token', res.data.token)
44.     app.setToken('refreshToken', res.data.refreshToken)
45.    
46.     // 1.2 获取到原来接口请求的参数
47.     config = Object.assign(config, {
48.    
49.    
50.       header: {
51.    
52.    
53.         // 更新后的 token
54.         Authorization: 'Bearer ' + res.data.token,
55.       },
56.     })
57.     // 重新发请求
58.     return http(config)
59.   }
60.   // 只保留data数据，其它的都过滤掉
61.   return data
62. }

复制代码

在相应拦截器中通过 config 参数可以获取调用接口的路径参数，判定假如调用的是 /refreshToken 接口且返回的是 401 时，则表过是 refreshToken 当前也是逾期了。
二、房屋管理

房屋管理是项目中最大的功能模块，别的包罗了位置服务、房屋信息、房屋列表、添加房屋、修改房屋、删除房屋等子功能。
2.1 位置服务

位置服务（LBS）是基于用户的位置来提供服务的技能，通过要共同第三方的服务来实现，如腾讯舆图、高德舆图、百度舆图等，在本项目接纳的是腾讯的位置服务。
申请使用腾讯位置服务必要按如下步调操纵：

  

• 注册账号  
  
• 创建应用  
  
• 天生 key  
  
• 小步伐管理配景添加正当域名
  

步调参考视频的先容和官方文档来操纵，在此就不缀述了。
在使用位置服务的时间必要提供用户的位置（经纬度），关于用户的位置小步伐提供了 API ，在使用获取位置的 API 时必要先在 app.json 中举行声明，并在小步伐管理后举行申请，干系限定请参考文档分析。

1. {
2.    
3.    
4.   "requiredPrivateInfos": [
5.     "getLocation",
6.     "chooseLocation"
7.   ],
8.   "permission": {
9.    
10.    
11.     "scope.userLocation": {
12.    
13.    
14.       "desc": "你的位置信息将用于小程序位置接口的效果展示"
15.    }
16. }

复制代码

调用 wx.getLocation() 获取用户当前位置，该 API 支持返回 Promise：

1. Page({
2.    
3.    
4.   async getLocation() {
5.    
6.    
7.     // 调用 API
8.     const {
9.    
10.    latitude, longitude} = await wx.getLocation()
11.     console.log(latitude, longitude)
12.   }
13. })

复制代码

调用 wx.chooseLocation 会打开舆图由用户自由选择一个位置后返回该位置的经纬度，该 API 支持返回 Promise：
[code][/code]