时间戳

首页 > 解决方案 > 如何在 Nuxt App 中使用重定向而不闪烁？

vue.js - 如何在 Nuxt App 中使用重定向而不闪烁？

问题描述

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

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

我检查用户是否登录。如果不是 -> 重定向到登录页面，如果是 -> 停留在同一页面上 “Profile” 是在检查 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.jsauthenticationnuxt.jsvuex

解决方案

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

推荐阅读