微信小程序实现导航守卫-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序实现导航守卫。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

主要步骤：

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

// 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 组件：

<!-- house_pkg/pages/list/index.wxml -->
<authorization>
  <block wx:if="{{true}}">
    ...
  </block>
  <view wx:else class="blank">
    您还没有认证房屋，请点击 <navigator hover-class="none" class="link" url=" ">添加</navigator>
  </view>
</authorization>

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

<!-- 用户未登录就不显示页面的内容 -->
<slot wx:if="{{isLogin}}"></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
    })
  },

登录页面整体逻辑如下文章来源地址https://www.toymoban.com/news/detail-498381.html

登录页面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,
    })
  },
})

到了这里，关于微信小程序实现导航守卫的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！