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

这个登录状态同步的问题很常见，我来给你拆解下。根本原因是页面跳转和数据更新时机没处理好，我给你一个完整的解决方案。

首先，CSS那部分其实不是关键问题，重点在登录流程的处理。你的visibility控制方式是对的，但数据没及时更新。

正确流程应该这样走：

1. 在app.js里定义全局状态，比如：

App({

  globalData: {

    userInfo: null,

    isLogin: false

  }

})

2. 登录成功后，要同时做三件事：

// 在登录回调里

wx.login({

  success: res => {

    // 1. 调用后端接口验证code

    yourLoginApi(res.code).then(data => {

      // 2. 更新全局状态

      const app = getApp()

      app.globalData.userInfo = data.user

      app.globalData.isLogin = true

      

      // 3. 跳转页面时带上参数强制刷新

      wx.switchTab({

        url: '/pages/profile/index?refresh=' + Date.now(),

        success: () => {

          // 4. 触发目标页面的数据更新

          const page = getCurrentPages().pop()

          if (page && page.onLoad) page.onLoad()

        }

      })

    })

  }

})

3. 在个人中心页面的onShow里检查状态：

Page({

  data: { isLogin: false },

  

  onShow() {

    const app = getApp()

    this.setData({

      isLogin: app.globalData.isLogin,

      userInfo: app.globalData.userInfo

    })

    // 这里可以加个console.log确认数据更新了

  }

})

这里需要注意几个关键点：
1. 不要用navigateTo跳tabbar页面，要用switchTab
2. 加时间戳参数强制刷新页面
3. 全局状态和页面data要分开管理
4. 生命周期函数要用对，onLoad只在初次加载执行，onShow每次显示都会触发

你的CSS可以配合这样用：

.user-info {

  display: flex;

  align-items: center;

  /* 改成用opacity或者display控制更可靠 */

  display: var(--user-display, none);

}

JS里这样控制：

// 在模板里

我上次做项目也踩过这个坑，调试了半天发现是生命周期搞错了。如果还有问题，可以检查下后端返回的userInfo结构是否和前端匹配。

这个问题主要是小程序页面跳转时数据状态没有同步导致的。你用 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 的值。

最后提醒一下，调试的时候多看看网络请求和缓存是否正常，避免因为缓存未清除导致问题难以复现。