VUE 实现浏览器URL替换

场景：很多时候第三方或者系统之间跳转页面时需要在Url上带有私密信息，比如Token，以下是替换Url中token的数据的操作：

VUE项目中Main.js中获取Token且替换掉浏览器上的Url

const getTokenFromUrl = () => {const url = window.location.href;const urlParams = new URLSearchParams(new URL(url).search);return urlParams.get('token');
};const getnewurl = (name) => {var loca = window.location;var baseUrl = loca.origin + loca.pathname + "?";var query = loca.search.substr(1);if (query.indexOf(name) > -1) {var obj = {}var arr = query.split("&");for (var i = 0; i < arr.length; i++) {arr[i] = arr[i].split("=");obj[arr[i][0]] = arr[i][1];};delete obj[name];var url = baseUrl + JSON.stringify(obj).replace(/[\"\{\}]/g, "").replace(/\:/g, "=").replace(/\,/g, "&");return url};
}window.history.replaceState(null, null, getnewurl('token'));

完整代码：

import { createApp } from 'vue'
import App from './App.vue'
// import Scratchcard  from '@nutui/nutui-bingo'
import NutBig from "@nutui/nutui-bingo";
import "@nutui/nutui-bingo/dist/style.css";
import 'element-ui/lib/theme-chalk/index.css';
import VueRouter from 'vue-router';
import { setLocalStorageWithExpiry, getLocalStorageWithExpiry } from '@/base/config';const app = createApp(App);
app.use(NutBig);
app.use(VueRouter);// 从 URL 中获取 token 的函数
const getTokenFromUrl = () => {const url = window.location.href;const urlParams = new URLSearchParams(new URL(url).search);return urlParams.get('token');
};const getLotteryCodeFromUrl = () => {const url = window.location.href;const urlParams = new URLSearchParams(new URL(url).search);return urlParams.get('code');
};const getnewurl = (name) => {var loca = window.location;var baseUrl = loca.origin + loca.pathname + "?";var query = loca.search.substr(1);if (query.indexOf(name) > -1) {var obj = {}var arr = query.split("&");for (var i = 0; i < arr.length; i++) {arr[i] = arr[i].split("=");obj[arr[i][0]] = arr[i][1];};delete obj[name];var url = baseUrl + JSON.stringify(obj).replace(/[\"\{\}]/g, "").replace(/\:/g, "=").replace(/\,/g, "&");return url};
}// 获取 token
const token = getTokenFromUrl();
const lotteryCode = getLotteryCodeFromUrl();if (token) {// 将 token 存储到 localStoragesetLocalStorageWithExpiry('token', token, parseInt(process.env.VUE_APP_TOKEN_EXPIRES));// localStorage.setItem('token', token);console.log('Token 已成功获取并存储:', token);
} else {let tokenExp = getLocalStorageWithExpiry('token');if (tokenExp == null) {alert('身份验证失败');console.log('URL 中未找到 token 参数');}
}if (lotteryCode) {// 将 token 存储到 localStoragelocalStorage.setItem('lotteryCode', lotteryCode);console.log('活动编号已成功获取并存储:', lotteryCode);
} else {alert('活动编号未查到');console.log('URL 中未找到 lotteryCode/code 参数');
}
window.history.replaceState(null, null, getnewurl('token'));
app.mount('#app');// const app = createApp(App)
// app.use(Scratchcard)

效果请求为http://localhost:8081/?token=56e1ab106e688445f79ad518ad4dae&code=5566

显示为：