微信小程序 实现导航守卫

小程序中是不支持路由拦截的，需要开发者自行封装路由拦截的功能，实践有许多的实现思路，下面我采用的是封装组件的方式实现。比方说一个小程序项目只有一两个页面是不需要登录就可以访问的，其他页面都是需要登录之后才能访问的，那我就用封装一些逻辑来检测用户是否是登录状态，如果不是则重定向到登录页，等用户完成登录后再跳转到用户本来要访问的页面。

主要实现原理：通过本地存储的 token 来判断用户的登录状态，在小程序启动时读取本地存储并记录到应用实例当中，方便其它页面全局访问：

主要步骤：

1. 封装名称为 authorization 的组件
2. 在生命周期函数onLaunch中读取全局中记录的 token 数据
3. 获取当前页面的路径，在未登陆的情况下通过地址参数传给登录页面

// app.js
App({
  onLaunch() {
    //调用函数 读取 token
    this.getToken()
  },
   //封装获取token的函数
  getToken() {
    // 异步方式不会阻塞
    wx.getStorage({
      key: 'token',
      success: ({ data }) => {
        // this 指向应用实例
        this.token = data
      },
      fail() {},
    })
  }
})

封装组件 

在根目录创建 components/authorization 目录，然后在 app.json 中全局注册该组件：

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

接下来在【房屋列表】页面应用 authorization 组件：

  
    ...
  
  
    您还没有认证房屋，请点击 添加
  

当前 authorization 组件是没有执行任何逻辑的，接下来咱们去组件中添加插槽 slot:

此时跳转到【房屋列表】时会出现空白的内容，原因是 isLogin 的值当前为 undefined 即为 false 假值。

读取登录状态

在上面isLogin 的数并未进行初始化且为假值，接下来咱们在生命周期函数 attached 中读取一个用户的登录状态：

// components/authorization/index.js
Component({
  data: {
    isFlag: false,
  },
  // 生命周期函数
  lifetimes: {
    attached() {
      // 登录状态
      const isFlag= !!getApp().token
      // 记录登录状态
      this.setData({ isFlag})
      // 未登录重定向到登录页
      if (!isFlag) {
        // 引导用户到登录页面
        wx.redirectTo({
          url: `/pages/login/index`,
        })
      }
    },
  },
})

获取页面路径

在用户完成登录后页面要回到用户原本要访问的页面，要实现这个功能需要咱们先获取用户正在访问的页面路径，然后把这个路径传给登录页面，这样在登录成功后便可以再跳转到回这个页面了，获取页面路径的方法如下：

// components/authorization/index.js
const app=getApp()
Component({
  data: {
    isFlag: false,
    redirect：''
    
  },
  // 生命周期函数
  lifetimes: {
    attached() {
       // 记录登录状态
       this.setData({
        isFlag: app.token ? 'true' : "false"
      })
  
     //  如果未登录重定向到登录页面 将当前页面的路径存下来 
      if (!app.token) {
        wx.redirectTo({
          url: '/pages/login/index'
        })
      }
    },
  },
})
 

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

完成登录页面的功能之后 登录成功就可以根据保存的路径跳转到当前页面

// components/authorization/index.js
const app=getApp()
Component({
  data: {
    isFlag: false,
    redirect：''
    
  },
  // 生命周期函数
  lifetimes: {
    attached() {
       // 记录登录状态
       this.setData({
        isFlag: app.token ? 'true' : "false"
      })
  
        // 读取当前历史栈getCurrentPages()   第一个历史页面getCurrentPages()[0]
      // console.log(getCurrentPages()[getCurrentPages().length-1].route,789); //最后一个历史页面
      const redirect = getCurrentPages()[getCurrentPages().length - 1].route
      console.log(redirect);
      if (!app.token) {
        wx.redirectTo({
        //获取当前页面的路径，在未登陆的情况下通过地址参数传给登录页面
          url: '/pages/login/index?redirect=/' + redirect
        })
        this.setData({
          redirect: redirect
        })

    },
  },
})

在登录页面的onLoad 中拿到传递过来的历史路径 登录成功跳回到历史路径

 // 跳转页面  写活：登录成功就要跳回到上一个历史页面
    wx.redirectTo({
      // url: '/pages/index/index',
      url: this.data.redirect || '/pages/my/index'
    })
  },
  // 拿到历史页面路径redirect
  onLoad(option) {
    console.log(option.redirect, 123456);
    this.setData({
      redirect: option.redirect
    })
  },

 登录页面整体逻辑如下

登录页面login/index
const app=getApp()
Page({
  data: {
    countDownVisible: false, //
    mobile: '13066668888',
    code: '', //用户输入的验证码  登录请求的时候后端接口需要的是code
    userCode: '', //通过手机号发请求拿到的code
    redirect:'' //历史页面路径
  },
  // 表单输入事件  获取输入的手机号 
  InputHandle(e) {
    console.log(e.detail, '获取输入的手机号');
    this.setData({
      mobile: e.detail
    })
  },
  // 获取输入的验证码
  CodeHandle(e) {
    console.log(e.detail, '获取输入的验证码');
    this.setData({
      code:e.detail
    })
  },
  // 点击获取验证码
  async start() {
    //1 校验手机号是否合法 如果合法就发请求 发送验证码
    const reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
    let flag = reg.test(this.data.mobile) //如果手机号不合法 返回false
    if (!flag) {
      wx.utils.toast('请输入合法手机号')
    }
    // 发请求，获取验证码
    const res = await wx.http.get('/code', {
      mobile: this.data.mobile.trim()
    })
    this.setData({
      countDownVisible: true,
      userCode: res.data.code
    })
    console.log(res, 3333); //获取的code
  },
  // 点击登录  跳转到之前的历史页面
 async loginHandle(){
      //  拿到点击获取的随机验证码  与输入的验证码进行校验 如果一致则登录 否则提示验证码错误
    if(this.data.code!==this.data.userCode) return wx.utils.toast('请输入正确的验证码')
    // 如果是一致就发请求登录
    const res =await wx.http.post('/login',{
      mobile:this.data.mobile,
      code:this.data.code
    })
    console.log(res,44444);  //可以拿到token 和 refreshToken 存在本地和app.js中 存在本地中是为了token持久化
    app.token=res.data.token,
    app.refreshToken=res.data.refreshToken,
    wx.setStorage({
      key:'token',
      data:app.token
    })
    wx.setStorage({
      key:'refreshToken',
      data:app.refreshToken
    })
    // 跳转页面  写活：登录成功就要跳回到上一个历史页面
    wx.redirectTo({
      // url: '/pages/index/index',
      url: this.data.redirect || '/pages/my/index'
    })
  },
  // 拿到历史页面路径redirect
  onLoad(option) {
    console.log(option.redirect, 123456);
    this.setData({
      redirect: option.redirect
    })
  },
  // 获取倒计时信息
  countDownChange(ev) {
    this.setData({
      timeData: ev.detail,
      countDownVisible: ev.detail.minutes === 1 || ev.detail.seconds > 0,
    })
  },
})