Question

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

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

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

现在，如果我打开路径“ /”，则如果我未登录，则应该将我重新路由到“ /登录”页面，登录后应重新定向到“ / content”。这里没有什么特别的。现在，我的页面几乎可以正常工作了。如果我在浏览器中输入“ / content”，它将尝试使用默认数据（即userId = -1）呈现“ / content”组件，然后立即将其重新路由到“ / login”页面。 “ / content”仅显示一秒钟。这是我的问题。我想重新路由到'/ login'，而没有更早地使用默认数据渲染'/ content'。

很明显，它试图渲染“ / content”-可能是从缓存或其他东西来渲染的，但是由于重路由是我在created（）中的第一个命令，因此不应将/ content组件安装在应用程序组件中，但将/ login装入。

任何想法如何预防？我知道我没有附加任何代码，但是我希望您不必理解这个问题并提出任何解决方案的建议，因为它将需要削减和简化很多代码。

Answer 1

在您的情况下，我认为您应该使用vue路由器的beforeEach挂钩。您可以使用路由器中的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();
  }
})

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

Answer 2

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

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

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

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

2 个答案: