Vue.js 使用 VueRouter - 如何在用户刷新时正确路由

Question

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

main.js - 存储所有组件定义，从中导入它们外部文件等。
App.vue - 存储的主要成分所有其他
routes.js - 存储所有路由定义
login.vue - 存储登录组件（登录页面）
content.vue - 商店页面组件

（非常简化的版本，但您一定明白）。

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

很明显，它试图呈现“/content”——可能来自缓存或其他东西，但由于重新路由是我在 created() 中的第一个命令，它不应该在 app 组件中挂载 /content 组件，但是 /login.

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

Answer 1

对于你的情况，我认为你应该使用 vue router 的 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 个关键字

Answer 2

除非 API 同时声明您不再通过身份验证，否则路由器将无法通过 beforeEach 方法自行刷新。

即使使用从 API 检索数据的循环方法，也会将它们作为反应数据存储在商店中。

在 Vue 中，一切都可以是响应式的，除了 Vue 路由器

Vue.js 使用 VueRouter - 如何在用户刷新时正确路由

Vue.js with VueRouter - how to correctly route on user's refresh

page-refresh

vue.js

vue-router

vuex