Vue路由器导航保护防止url被更改答案

【问题标题】：Vue router navigation guard prevent url from being changedVue路由器导航保护防止url被更改
【发布时间】：2020-03-13 23:16:59
【问题描述】：

我正在使用 vuejs 导航守卫进行一些检查，以检查用户是否可以有效进入页面。如果用户不符合标准，我希望身份验证保护返回它当前所做的错误。但是，完成此操作后，浏览器 url 将设置回我来自的上一个 url。我不希望这种行为相反，我希望浏览器 url 保持不变，但仍然让用户无法使用该页面。

我想要这样做的原因是，当用户点击刷新时，我希望它保持在同一页面上。我知道这是路由器的 vuejs 行为，但我希望找到解决方法。这是auth guard的代码。

function guardRoute (to, from, next) {

    if (window.$cookies.get('kiosk_mode') === new DeviceUUID().get()) {
        return next(false)
    }

    return next()

}

【问题讨论】：

您希望浏览器 url 与什么保持一致？和用户尝试导航之前一样吗？
是的，所以如果用户要去 /test 但检查失败，浏览器中的 url 仍然是 /test
因此，如果用户在 /home 并尝试 /test 但路由保护拒绝了您希望 url 读取 /test 的请求，即使他们仍在 /home 路由上？
是的，这就是我想要的行为。

标签： laravel vue.js vue-router

【解决方案1】：

要拒绝导航但不将 url 重置为之前的状态，您可以拒绝导航（需要 vue 2.4.0+）：

next(new Error('Authentication failure'));

如果您没有路由器错误处理，那么您需要包括：

router.onError(error => {
    console.log(error);
});

【讨论】：

【解决方案2】：

试试这个 history.pushState({}, null, '/test') 前返回 next(false);

【讨论】：