原生小程序封装有无 token 限制访问页面的组件

1. 在根路径上新建 components 文件夹并在里面新建文件夹 authorization，在此文件夹上点击新建组件 index，并在 app.json 内的 usingComponents 节点全局注册该组件。

 "usingComponents": {
// 有错误的话就注意是不是自己的路径不对
    "authorization": "/components/authorization/index"
  },

2. 在该组件的 index.js 内编写 如下代码：

Component({
  /**
   * 组件的初始数据
   */
  data: {
    // 定义是否有 token 默认为没有
    isLogin: false,
  },

  lifetimes: {
    attached() {
      // 获取本地存储的 token 转换为 Boolen 类型
      const isLogin = !!getApp().token

      // 赋值
      this.setData({ isLogin })

      // 判断是否有 toekn
      if (!isLogin) {
        // 此处为优化用户体验，如果用户点击某一个需要 toekn 的页面，跳转到 login 页面之后重新登录并重新跳转回之前的页面
        // 此处是 拿到最后一个页面的路径
        const pageStack = getCurrentPages()
        const currentPage = pageStack[pageStack.length - 1]

        // 重定向至 登录页
        wx.redirectTo({
          url: `/pages/login/index?redirectURL=${currentPage.route}`,
        })
      }
    },
  }
})

3. 在组件的 index.wxml 内编写

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

4. 页面使用，在需要 token 才能访问的页面使用此组件将全部包裹内容即可