Vue 多项目间跳转并保存用户信息的实用解决方案

前端

2024-01-28 13:28:16

关键词：

1. 背景与挑战

随着大型软件系统的日益复杂，采用多项目架构已成为一种常见做法。在 Vue 生态系统中，将一个系统拆分为多个子项目可以提高可维护性、可扩展性和团队协作效率。

然而，在多项目架构中，项目间跳转和用户信息共享成为一个不容忽视的挑战。用户在不同项目之间导航时，需要保持登录状态，并且他们的信息，如用户信息和令牌，也需要跨项目无缝传递。

2. 解决方案：利用 Vuex 共享状态

Vuex 是 Vue.js 生态系统中流行的状态管理工具。它允许在多个组件和项目之间共享响应式状态。我们可以利用 Vuex 来保存和传递用户信息，从而实现跨项目的用户状态管理。

在主项目中，我们可以创建一个 Vuex 模块来存储用户信息：

const userModule = {
  state: {
    userInfo: null,
    token: null
  },
  mutations: {
    setUserInfo(state, userInfo) {
      state.userInfo = userInfo;
    },
    setToken(state, token) {
      state.token = token;
    }
  },
  getters: {
    getUserInfo: state => state.userInfo,
    getToken: state => state.token
  }
};

3. 项目间跳转

要实现项目间跳转，我们可以使用 Vue Router 的 push 或 replace 方法。在主项目中，我们可以通过调用 this.$router.push({ path: '/child-project' }) 来跳转到子项目。

在子项目中，我们需要创建一个路由守卫来获取用户信息。我们可以使用 beforeEach 守卫在路由导航之前执行以下操作：

router.beforeEach((to, from, next) => {
  const userInfo = store.getters.getUserInfo;
  const token = store.getters.getToken;

  if (to.name !== 'login' && !userInfo) {
    next({ name: 'login' });
  } else {
    next();
  }
});

4. 用户信息传递

为了传递用户信息，我们可以使用 query 参数或 sessionStorage。在主项目中，当用户跳转到子项目时，我们可以将用户信息作为 query 参数传递：

this.$router.push({ path: '/child-project', query: { userInfo: userInfo, token: token } });

在子项目中，我们可以通过 this.$route.query 访问用户信息。然后，我们可以将其存储在 Vuex 状态中，以便在整个项目中访问。

5. 实际应用示例

以下是一个使用 Vuex 和项目间跳转来保存和共享用户信息的实际应用示例：

// 在主项目中
store.dispatch('userModule/setUserInfo', userInfo);
store.dispatch('userModule/setToken', token);
this.$router.push({ path: '/child-project', query: { userInfo: userInfo, token: token } });

// 在子项目中
router.beforeEach((to, from, next) => {
  const userInfo = this.$route.query.userInfo;
  const token = this.$route.query.token;

  store.dispatch('userModule/setUserInfo', userInfo);
  store.dispatch('userModule/setToken', token);
  next();
});