如何在 Nuxt App 中使用重定向而不闪烁？答案

【问题标题】：How to use redirect without flicker in Nuxt App?如何在 Nuxt App 中使用重定向而不闪烁？
【发布时间】：2021-01-26 14:42:48
【问题描述】：

我有 nuxt js 应用程序，我已经用 vuex 实现了用户授权。当用户点击导航栏中的nuxt链接时

<nuxt-link to="/profile">Profile</nuxt-link>

我检查用户是否登录。如果不是 -> 重定向到登录页面，如果是 -> 留在同一页面“个人资料” 这是检查 vuex 状态之前的闪烁。个人资料页面出现在重定向到登录页面之前的毫秒数

我该如何解决？

导航栏：

<nuxt-link to="/profile">Profile</nuxt-link>

个人资料页面：

<template>
  <div class="profile">
    <h1>Profile</h1>
    <p> Content</P>
  </div>
</template>

beforeCreate() {

    if (!this.isUserLogged) {
      this.$router.push({name: 'login', path: '/login'})
    }
  },
  computed: {
    ...mapState('login', ['isUserLogged']),
  },

Vuex：

export const state = () => ({
  isUserLogged: false,
})

【问题讨论】：

标签： vue.js authentication nuxt.js vuex

【解决方案1】：

您可以在第一次呈现导航栏组件时检查用户是否已经登录。如果用户已经登录，只需禁用链接。如果用户未登录，您可以在成功登录后通过重新渲染导航栏组件来禁用链接。或者，您可以在用户登录或注销时动态禁用或启用链接。

【讨论】：