Vue.js 路由在身份验证检查后重定向之前短暂显示 404 错误消息

Posted 2023-02-22

【中文标题】Vue.js 路由在身份验证检查后重定向之前短暂显示 404 错误消息

【英文标题】：Vue.js Routing shows 404 error message briefly before redirect after auth check

【发布时间】：2021-12-06 07:07:15

【问题描述】：

我在 Stack Overflow 和其他网站上关注了许多关于设置 Vue 路由以检查用户身份验证的帖子指南。我现在拥有的设置基本上可以正常工作（对于每个路由，都会检查用户身份验证状态，并在必要时重定向到登录页面）但是在用户被重定向之前存在一个小问题，标准 Nuxt/Vue 404页面画面瞬间闪现。

这是我在 router.js 中需要用户身份验证的每个路由的示例：

...

    path: '/question/:id/comments',
    name: 'comments',
    component: page('Comments.vue'),
    meta: requiresAuth: true,
    beforeEnter: (to, from, next) => 
        guard(to, from, next);
    
,
...

这是我的guard() 函数，它检查用户身份验证，然后根据需要使用next() 重定向它们：

const guard = function(to, from, next) 
    axios.get(process.env.apiUrl + 'check-auth').then(response => 
        if( to.matched.some( record => record.meta.requiresAdmin ) ) 
            if( response.data.is_moderator !== 1 ) 
                next(  path: '/' );
             else 
                next();
            
         else if( to.matched.some( record => record.meta.requiresAuth ) ) 
            if( !response.data.id ) 
                next(
                    path: '/login',
                    params:  nextUrl: to.fullPath 
                );
             else 
                next();
            
         else 
            next();
        

    );
;

许多在线文章建议使用localStorage 来检查用户身份验证，但这在 router.js 中不起作用（可能是因为它的服务器端而不是客户端）但我使用 Laravel API 调用与 Axios 解决了这个问题请检查它。

如果有人能解释为什么 404 屏幕在重定向之前首先闪烁？直接去路由可以正常工作，所以我猜它一定与next()方法有关。

【问题讨论】：

很难从您提供的内容中分辨出来，但传递给next()（或router.push()）的对象不应包含path 和params 的组合 - 仅允许params使用name - 检查note between tho code examples

谢谢。我没有意识到这一点。我之前确实使用了name 而不是path，但我改变了它只是为了看看它是否会有所作为。传递了值nextUrl 参数，因此我知道在用户登录后将其发送到哪里。

您实际上做了一些条件来检查localStorage 是否可用，因此实际上没有任何阻塞。就问题本身而言，您实际上可以将令牌存储到 cookie 中（在服务器和客户端上都可用）。试着清理你的逻辑，有很多 if/else 即使我不确定它是否是实际的闪烁。问题可能出在其他地方，更多的是您的target 和s-s-r 配置以及您访问页面的方式。所以是的，minimal reproducible example 在这里会非常有用，因为我们缺乏细节，这可能是因为各种原因。

我去掉了 axios 调用和任何身份验证检查，只是将 next() 调用包含在我的所有路由的 guard() 方法中，以转发到登录路由。如果我访问使用 beforeEnter 的路由之一，它会重定向到 /login URL，但会显示 404 页面。但是，如果您刷新页面，它会加载。很奇怪。

是的，minimal reproducible example 整天。无法仅提供帮助。

【参考方案1】：

它可能正在等待 axios 响应一小段时间。您可以使用 async/await 方法，并在导航到路由之前等待 axios 响应。路线如下所示：

async beforeEnter: (to, from, next) => 
  await guard(to, from, next);

在你的保护下，你会做这样的事情：

const guard = async function(to, from, next) 
const response = await axios.get(process.env.apiUrl + 'check-auth')
if( to.matched.some( record => record.meta.requiresAdmin ) ) 
...

休息也是一样的。 这将在导航到路线之前等待响应。

【讨论】：

我不得不将beforeEnter 方法的格式更改为：async beforeEnter(to, from, next) await guard(to, from, next); 但不幸的是，这不起作用。还有其他想法吗？

使用async/await 或回调地狱 (.then) 编写在一天结束时几乎相同。