如何在vue3项目app.ts中获取第三方跳转过来的token 提前处理携带token情况的初始化 两种方式 路由守卫和window.location

如何在vue3项目app.ts中获取第三方跳转过来的token 提前处理携带token情况的初始化 两种方式 路由守卫和window.location

在 Vue 3 项目的 app.ts 文件中获取第三方跳转过来的 token，你可以使用 Vue Router 的 route 对象来获取 URL 参数。

假设你的 token 参数位于 URL 的查询字符串中，可以通过 route.query 来获取查询参数对象，然后获取对应的 token 值。

以下是一个示例，展示如何在 app.ts 文件中获取第三方跳转过来的 token：

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 路由配置
  ],
});

router.beforeEach((to, from, next) => {
  const token = to.query.token as string; // 假设 token 参数的名称是 "token"

  // 在这里可以使用 token 做一些处理，比如保存到 Vuex 或本地存储

  next();
});

const app = createApp(App);
app.use(router);
app.mount('#app');

在上述示例中，我们首先使用 createRouter 创建一个 Vue Router 实例，并配置相应的路由信息。然后，我们在 router.beforeEach 导航守卫中获取 to.query.token，将其作为 token 值进行处理。

你可以在导航守卫中根据需要对 token 做进一步的处理，比如保存到 Vuex 状态管理器或本地存储中。然后，你可以继续导航，通过调用 next() 函数。

请根据你的实际需求和代码上下文，在 app.ts 文件中使用上述示例中的代码来获取第三方跳转过来的 token。记得根据实际情况修改参数名称和处理逻辑。

在 Vue 3 项目中，如果你想在导航守卫之外的地方获取第三方跳转过来的 token，你可以使用 window.location.search 获取当前 URL 的查询字符串，然后解析查询参数来获取 token 值。

以下是一个示例，展示如何在导航守卫之外的地方获取第三方跳转过来的 token：

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const token = urlParams.get('token');

// 在这里可以使用 token 做一些处理，比如保存到 Vuex 或本地存储

在上述示例中，我们通过 window.location.search 获取当前 URL 的查询字符串，然后使用 URLSearchParams 对象解析查询参数。接下来，我们使用 get 方法获取名为 "token" 的查询参数值。

你可以根据需要在这段代码之后，对 token 做进一步的处理，比如保存到 Vuex 状态管理器或本地存储中。

请注意，这种方式是在导航守卫之外获取 token 的典型方法。在导航守卫中，你可以直接使用 Vue Router 提供的 to.query.token 来获取查询参数中的 token 值。

记得根据实际情况修改参数名称和处理逻辑。