小程序封装控制登录权限的组件

1. 在components中新建一个公共组件authorization，并全局注册（局部注册倒是也可以，但是只有大聪明这么干。）。

<view></view>

1. 在该组件authorization中获取token，通过布尔类型!!双重取反,判断是否存在token（老师是这么教的，但是我认为用布尔类型强制转换应该也可以吧。），在生命周期函数attached()中，再用wx:if控制是否将authorization组件进行显示或隐藏。（不用担心token是否正确的问题，如果不正确的话，在拦截器中做判断是否需要登录。）

<view wx:if="{{isLogin}}">

</view>

Component({

  data: {

    isLogin: false

  },

  // 生命周期函数

  lifetimes: {

    attached() {

      const token = getApp().token

      this.setData({

        isLogin: !!token

      })

    }

  }

})

1. 将需要控制登录权限的组件，用这个控制权限的公共组件authorization进行包裹。

<authorization>

  <!—

省略的需要控制的组件代码

  -->

</authorization>

1. 在公共组件authorization中添加插槽slot，这样需要控制权限的组件内容才会显示出来。（忘记插槽用法的可以回顾下vue的基础知识。）

<view wx:if="{{isLogin}}">

  <slot></slot>

</view>

1. 以上四个步骤已经将控制组件登录权限的功能做完，但是如果没有权限就会显示空白页面，用户体验极差，需要用getCurrentPages()获取路由记录，将页面地址作为参数传到登录页中，并跳到登录页，待到登录时，通过onLoad获取地址参数，登录验证成功后，直接跳回之前需要访问的页面。

Component({

  data: {

    isLogin: false

  },

  // 生命周期函数

  lifetimes: {

    attached() {

      const token = getApp().token

      this.setData({

        isLogin: !!token

      })

      if (!this.data.isLogin) {

        // 获取页面历史栈（路由记录）

        const pageStack = getCurrentPages()

        // 获取当前页面的路由信息

        const currentPage = pageStack[pageStack.length - 1].route

        this.data.isLogin = false

        wx.redirectTo({

          url: `/pages/login/index?returnUrl=/${currentPage}`

        })

      }

    }

  }

})

Page({

  data: {

    returnUrl: ''

  },

 

  onLoad({ returnUrl }) {

    // 获取地址参数

    this.setData({ returnUrl })

  },

 

  async submitForm() {

    /*

省略的登录的代码

*/

// 跳转到来时的页面

    wx.redirectTo({

      url: this.data.returnUrl

    })

  }

})