小程序 登录状态检测

当某些页面要求用户必须是登录状态才能访问，通过来封装一些逻辑来检测用户是否是登录状态，如果不是则重定向到登录页，等用户完成登录后再跳转到用户本来要访问的页面。

通过本地存储的 token 来判断用户的登录状态

在小程序启动时读取本地存储并记录到应用实例当中，方便其它页面全局访问：

// app.js  应用实例

App({
  globalData: {},

  // 用户token
  token: "",

  // 获取token
  getToken() {
    wx.getStorage({
      key: 'enjoy_token',
      success: (result) => {
        this.token = result
      },
    });
  },

  // 存储token
  setToken(token) {
    this.token = `Bearer ${token}`
    wx.setStorageSync('enjoy_token', token);
  }
})

封装鉴权组件

小程序中不支持路由拦截，可以采取封装组件的方式实现，对需要鉴权的页面，使用自定义组件，传递到自定义组件，组件内部使用插槽接收，通过判断有无token，来实现是否渲染。

主要的步骤：

1.封装名称为 authorization 的组件

<!-- authorization组件  wxml中 -->

<slot wx:if="{{isLoginFlag}}"></slot>

2.在app.json注册为全局

{
  ...
  "usingComponents": {
    "authorization": "/components/authorization/index"
  }
  ...
}

3.在生命周期函数中读取全局中记录的 token 数据

优化：取当前页面的路径，在未登陆的情况下通过地址参数传给登录页面

// authorization 组件js中

Component({
  // 组件的初始数据
  data: {
    isLoginFlag: false
  },

  // 生命周期函数
  lifetimes: {
      
    // 组件生命周期函数 - 在组件实例进入页面节点树时执行
    attached() {
      // 通过应用实例获取token
      const token = getApp().token
      
      // 核心一：根据是否有token 判断登录状态 控制页面渲染
      this.setData({
          // !! 判断一个变量是否存在，返回一个布尔值
          // 或  token? true:false
          isLoginFlag: !!token
      })

      // 核心二：没有token跳回登录页
      if(!token){
          // 读取当前历史栈
          const pages = getCurrentPages()
          // 获取当前正在访问页面路由地址
          const page = pages[pages.length - 1]?.route
          wx.redirectTo({
          url:`/pages/login/indexredirectUrl=${page}`,
        })
      }     
    } 
  }
})

4.在需要登录才能访问的页面中，使用该组件

<-- 在需要登录才能访问的页面中,把结构传递给鉴权组件 -->

<authorization>
  <text>该页面需要登陆后查看</text>
</authorization>