微信小程序全局路由拦截

最新推荐文章于 2025-07-03 01:31:09 发布

原创最新推荐文章于 2025-07-03 01:31:09 发布 · 7.6k 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #javascript #小程序

微信小程序与uni-app 专栏收录该内容

16 篇文章

订阅专栏

该博客介绍了如何在微信小程序中实现全局路由拦截，确保未登录用户被重定向到登录页面。通过在`utils/filter.js`中定义的`loginCheck`函数，对每个页面的`onLoad`生命周期进行包装，检查`userinfo`存储情况。如果用户未登录，会调用`wx.redirectTo`跳转到登录页面。这种方法可以有效控制页面访问权限。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 微信小程序全局路由拦截

// utils/filter.js
function loginCheck(pageObj) {
  if (pageObj.onLoad) {
      let _onLoad = pageObj.onLoad;
      // 使用onLoad的话需要传递options
      pageObj.onLoad = function (options) {
          if(wx.getStorageSync('userinfo')) {
              // 获取当前页面
              let currentInstance = getPageInstance();
              _onLoad.call(currentInstance, options);

          } else {
              //跳转到登录页
              wx.redirectTo({
                  url: "/pages/login/index"
              });
          }
      }
  }
  return pageObj;
}

// 获取当前页面    
function getPageInstance() {
  var pages = getCurrentPages();
  return pages[pages.length - 1];
}

exports.loginCheck = loginCheck;

2. 在需要使用的页面中使用就行了

/
const filter = require('../../utils/filter');
Page(filter.loginCheck({
    // ...
    onLoad: function (options) {
       // ...
    },
    // ...
}));