uni-app使用 Pinia 订阅快速简单实现用户初始化页面登录逻辑

使用 Pinia 实现用户初始化页面登录逻辑

在现代前端开发中，用户登录状态的管理是一个常见的需求。通过使用 Pinia 的订阅功能，我们可以高效地实现用户登录后的页面初始化逻辑。本文将详细介绍如何利用 Pinia 的 subscribe 功能快速实现用户初始化页面登录后执行后续代码的逻辑。

代码实现

1. 页面使用示例

在页面中，我们通过调用 initPage 函数来确保用户登录后才执行后续代码。以下是页面的实现代码：

JavaScript复制

import { initPage } from "../../utils/auth.js";

export default {
  onLoad(async (options) => {
    await initPage();
  }),
};

2. token.js 部分

我们使用 Pinia 定义了一个 token store，用于管理用户的登录令牌（token）。以下是 token.js 的代码：

JavaScript复制

import { defineStore } from 'pinia';

export const useTokenStore = defineStore('token', {
  state: () => ({
    token: null,
  }),
  actions: {
    setToken(value) {
      this.token = value;
    },
    clearToken() {
      this.token = null;
    },
  },
  getters: {
    getToken() {
      return this.token;
    },
  },
});

3. 初始化页面的核心逻辑

initPage 函数是实现用户登录后执行后续代码的核心。它通过监听 Pinia store 中的 token 变化来决定是否继续执行后续代码。以下是 initPage 的实现代码：

JavaScript复制

import { useTokenStore } from "../stores/token";

/**
 * 初始化页面，用户登录后才执行后续代码
 * @returns {Promise<void>} - 当 token 有值时解析的 Promise
 */
export function initPage() {
  return new Promise((resolve) => {
    const tokenStore = useTokenStore();
    if (tokenStore.getToken) {
      // 如果 token 已存在，直接解析 Promise
      resolve();
    } else {
      // 监听 token 变化
      tokenStore.$subscribe((state) => {
        if (state.token) {
          // 当 token 被设置时，解析 Promise
          resolve();
        }
      });
    }
  });
}

4. App.vue 中的静默登录逻辑

在 App.vue 中，我们实现了静默登录逻辑，用于在应用启动时自动尝试登录。以下是 App.vue 的代码：

JavaScript复制

import { useTokenStore } from "../stores/token";
import { login, getTokenApi } from "../api/auth";

export default {
  onLaunch: function () {
    silentLogin();
  },
};
// 静默登录
const silentLogin  = async () =>{
  const { code } = await login()
  const token = await getTokenApi({code})
  tokenStore.setToken(token)
}

工作原理

1. 静默登录：在应用启动时，App.vue 中的 silentLogin 方法会尝试自动登录。登录成功后，会将获取到的 token 存储到 Pinia 的 token store 中。

2. 页面初始化：在页面的 onLoad 生命周期中，调用 initPage 方法。initPage 方法会检查 Pinia store 中的 token 是否存在：

   • 如果 token 已存在，说明用户已经登录，直接解析 Promise，页面继续执行后续代码。
   • 如果 token 不存在，通过 tokenStore.$subscribe 监听 token 的变化。一旦 token 被设置，解析 Promise，页面继续执行后续代码。

3. Pinia 订阅功能：通过 tokenStore.$subscribe，我们可以在 token 发生变化时触发回调函数。这种方式使得页面能够在用户登录后及时响应，确保后续代码的正确执行。

总结

通过 Pinia 的订阅功能，我们可以高效地实现用户登录后的页面初始化逻辑。这种方式不仅代码简洁，而且逻辑清晰，便于维护。希望本文的实现方法能够为你的项目提供参考。