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 存储到 localStorage
    setLocalStorageWithExpiry('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 存储到 localStorage
    localStorage.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

显示为：