元素
元素
工具
博客
问答

小程序授权登录后如何跳转到指定页面并保持状态？

端木可欣 阅读 12
移动

在开发小程序用户登录功能时，用wx.login获取code后调用接口登录，但跳转到个人中心页面时数据没刷新，还要手动刷新才能显示登录状态。

尝试过用wx.navigateTo跳转，也试过setData更新state，但页面还是显示未登录状态。这是我的CSS布局代码：

.user-info {
  display: flex;
  align-items: center;
  visibility: var(--user-visibility, hidden);
}

控制台没报错，就是数据不同步，求大神指点！

授权登录
我来解答 赞 3 收藏
二维码
手机扫码查看
反馈
1 条解答
百里梦媛
百里梦媛 Lv1
这个问题主要是小程序页面跳转时数据状态没有同步导致的。你用 wx.navigateTo 跳转的话，目标页面并不会重新加载，所以登录状态的数据可能没有及时更新。

建议你在登录成功后，使用 wx.setStorageSync 把登录状态存储到本地缓存中，比如存一个 token 或者用户信息。然后在跳转到个人中心页面时，先通过 onShow 生命周期函数去检查缓存中的状态，确保每次页面展示时都能同步最新的数据。

代码可以这样写：
// 登录成功后

wx.setStorageSync('isLoggedIn', true);

wx.setStorageSync('userInfo', userInfo); // 假设 userInfo 是接口返回的用户数据

wx.navigateTo({

  url: '/pages/userCenter/userCenter'

});



// 在个人中心页面

Page({

  onShow: function () {

    const isLoggedIn = wx.getStorageSync('isLoggedIn');

    if (isLoggedIn) {

      this.setData({

        userInfo: wx.getStorageSync('userInfo'),

        loginStatus: true

      });

    } else {

      this.setData({

        loginStatus: false

      });

    }

  }

});


注意安全：不要直接把敏感信息比如 token 存在本地缓存里，最好加密一下，或者只存一个标识符，具体数据还是从服务器拉取。另外，记得在服务端校验 token 的合法性，防止被伪造。

至于你的 CSS 部分，看起来是用 visibility 控制显示隐藏，这个没问题，但建议结合登录状态动态设置样式，比如在 setData 中更新 --user-visibility 的值。

最后提醒一下，调试的时候多看看网络请求和缓存是否正常，避免因为缓存未清除导致问题难以复现。
点赞
2026-02-18 19:00
相关推荐
元素
元素
工具
博客
问答
登录/注册