时间戳

首页 > 解决方案 > 带有 VueRouter 的 Vue.js - 如何在用户刷新时正确路由

vue.js - 带有 VueRouter 的 Vue.js - 如何在用户刷新时正确路由

问题描述

我在我的项目中使用 Vue 和 VueRouter（还有 Vuex，但这里不是这种情况）。想象一下我有 5 个文件：

  1. main.js - 存储所有组件定义，从外部文件导入它们等等。
  2. App.vue - 它是存储所有其他的主要组件
  3. routes.js - 存储所有路由定义
  4. login.vue - 存储登录组件（登录页面）
  5. content.vue - 存储页面组件

（相当简化的版本，但你肯定明白）。

现在，如果我打开路径“/”，如果我未登录，它应该将我重新路由到“/登录”页面，并在我登录时重新路由到“/内容”。这里没什么特别的。现在我的页面按预期工作（几乎）。如果我在浏览器中输入“/content”，它会尝试使用默认数据（即 userId = -1）呈现“/content”组件，然后立即将我重新路由到“/login”页面。'/content' 只显示一秒钟。这是我的问题。我想重新路由到 '/login' 而不提前使用默认数据渲染 '/content'。

很明显，它试图渲染“/content”——可能来自缓存或其他东西，但由于重新路由是我在 created() 中的第一个命令，它不应该在应用程序组件中安装 /content 组件，而是 /login。

知道如何预防吗？我知道我没有附加任何代码，但我希望你不需要理解问题并建议任何解决方案，因为它需要削减和简化大量代码。

标签： vue.jsvuexvue-routerpage-refresh

解决方案

在你的情况下，我认为你应该使用 vue 路由器的 beforeEach 钩子。可以在router中使用meta字段来指示路径是否需要认证，并在beforeEach函数中进行处理。

我将给出示例代码。

import Router from 'vue-router';

const router = new Router({
  routes: [{
    path: '/content',
    meta: {
      auth: true,
    }
  }, {
    path: '/login',
  }]
});


router.beforeEach(async (to, from, next) => {
  if (to.matched.some(m => m.meta.auth)) {

    // user your authentication function
    const isAuth = await getAuthentication;

    if (!isAuth) {
      next('/login');
    }

    next();
  }
})

如果您的身份验证功能不是异步功能，则应删除 async/await 关键字

推荐阅读