如何在vue3项目app.ts中获取第三方跳转过来的token 提前处理携带token情况的初始化，token使用后清除路由上的token字段； 两种方式 路由守卫和window.location myTimeout异步处理延迟跳转，可输出打印日志，token使用后将路由上的token属性去掉
如何在vue3项目app.ts中获取第三方跳转过来的token 提前处理携带token情况的初始化 两种方式 路由守卫和window.location
token使用后清除路由上的token字段；替换当前的浏览器历史记录清除token，不导致页面重载：window.history.replaceState({}, '', newUrl);
在 page/index.vue 主文件中的 onMounted 主页面加载完后做个定时清空token处理，
/** token在app.ts中router.beforeEach使用后，开始加载页面进入页面时清空,*/
setTimeout(() => {
const queryParams = new URLSearchParams(window.location.search);
queryParams.delete('token');
const newUrl = `${window.location.pathname}${queryParams.toString().length > 0 ? `?${queryParams.toString()}` : ''}`;
// 替换当前的浏览器历史记录，不导致页面重载
window.history.replaceState({}, '', newUrl);
}, 500);
在 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 值。
记得根据实际情况修改参数名称和处理逻辑。
static myTimeout(seconds: number) {
return new Promise<void>(resolve => {
setTimeout(() => {
resolve();
}, seconds);
});
}
应用：
router.beforeEach(async (to, _from, next) => {
/** 处理外部链接携带token处理 */
const LocalStore = useLocalStore();
let token = '';
const search = location.search;
let hash = to.hash; // 从location取hash有问题
/** 处理token为‘#ssoToken#’，token被解析为hash的情况 */
if (hash?.indexOf('#') > -1) {
hash = hash.replace(/\#\w+\#/g, '');
window.location.href = `${location.protocol}//${location.host}${location.pathname}${search}${hash}`;
} else {
token = to.query.token as string;
}
/** 活动界面不执行这里的单点登录, 执行activity文件内的公共登录路由onMounted方法 */
const activityRouter = ['weekly', 'invite'];
if (activityRouter.includes(to.name as string) || String(location.pathname).includes('/activity')) {
return next();
}
/** 处理token并且没本地用户信息，或者新的token，执行单点登录用户信息更新 */
if ((token && !LocalStore.userInfo?.account) || (token && String(token) != LocalStore.prevToken)) {
LocalStore.prevToken = String(token);
/** 新token清除旧用户数据 */
LocalStore.resetInfo();
/** 携带token执行单点登录获取T版用户信息，抽成公共方法 */
await handleH5TokenOssLogin(token as string);
}
next();
});
token使用后将路由上的token属性去掉
在app.vue中，onMounted
/** 兼容哈希路由的情况下进行清除token */
const token = route.query?.token;
if (token) {
const url = window.location.href;
const queryString = url.split('?')[1];
const urlParams = new URLSearchParams(queryString);
urlParams.delete('token');
const newQueryString = urlParams.toString();
const baseURL = url.split('?')[0];
const newURL = `${baseURL}${newQueryString ? `?${newQueryString}` : ''}`;
window.history.replaceState({}, '', newURL);
}
