0

对于身份验证，我确实使用nuxt-auth，当登录成功时，我想使用 重定向到主页this.$router.push('/')，然后我得到一个类似于空白页面的响应，并带有以下消息

2021

在此处输入图像描述, 在此处输入图像描述

// 用于登录

<template>
  <div class="limiter">
    <div
      class="container-login100"
      :style="{
        backgroundImage: 'url(' + require(`@/assets/login/images/bg-01.jpg`) + ')',
      }"
    >
      <div class="wrap-login100 p-l-110 p-r-110 p-t-62 p-b-33">
        <form class="login100-form validate-form flex-sb flex-w">
          <span class="login100-form-title p-b-53"> Login Admin </span>

          <a href="facebook.com" class="btn-face m-b-20">
            <i class="fa fa-facebook-official"></i>
            Facebook
          </a>

          <a href="google.com" class="btn-google m-b-20">
            <img :src="require(`@/assets/login/images/icons/icon-google.png`)" alt="GOOGLE" />
            Google
          </a>

          <div class="p-t-31 p-b-9">
            <span class="txt1"> Email </span>
          </div>
          <div class="wrap-input100 validate-input" data-validate="Email is required">
            <input v-model="auth.email" class="input100" type="email" name="email" />
            <span class="focus-input100"></span>
          </div>

          <div class="p-t-13 p-b-9">
            <span class="txt1"> Password </span>

            <a href="#" class="txt2 bo1 m-l-5"> Forgot? </a>
          </div>
          <div class="wrap-input100 validate-input" data-validate="Password is required">
            <input v-model="auth.password" class="input100" type="password" name="pass" />
            <span class="focus-input100"></span>
          </div>

          <div class="container-login100-form-btn m-t-17">
            <a href="javascript:void(0)" class="login100-form-btn" @click="submit">Login</a>
          </div>

          <div class="w-full text-center p-t-55">
            <span class="txt2"> Not a member? </span>

            <a href="#" class="txt2 bo1"> Register now </a>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  auth: false,
  data() {
    return {
      auth: {
        email: null,
        password: null,
      },
    }
  },
  mounted() {
    if (this.$auth.loggedIn) {
      this.$router.push('/')
    }
  },
  methods: {
    async submit() {
      try {
        const response = await this.$auth.loginWith('local', { data: this.auth })
        this.$router.push('/')
      } catch (err) {
        console.log(err)
      }
    },
  },
}
</script>

存储 vuex index.js

export const getters = {
  isAuthenticated(state) {
    return state.auth.loggedIn
  },

  loggedInUser(state) {
    return state.auth.user
  }}
}

布局 default.vue

<template>
  <div class="wrapper">
    <Sidebar v-if="isAuthenticated" />
    <div :class="isAuthenticated ? 'main-panel' : ''">
      <Navbar v-if="isAuthenticated" />
      <Nuxt />
      <Footer v-if="isAuthenticated" />
    </div>
  </div>
</template>
<script>
import Sidebar from '@/components/layout/Sidebar.vue'
import Navbar from '@/components/layout/Navbar.vue'
import Footer from '@/components/layout/Footer.vue'
import { mapGetters } from 'vuex'

export default {
  components: { Sidebar, Navbar, Footer },
  computed: {
    ...mapGetters(['isAuthenticated', 'loggedInUser']),
  },
}
</script>

// 验证 nuxt 配置

auth : {
  strategies: {
    local: {
      token: {
        property: 'token',
        required: true,
        type: 'Bearer'
      },
      user: {
        property: 'user',
        autoFetch: true
      },
      endpoints: {
        login: { url: '/sign/login', method: 'post' },
        logout: { url: '/sign/logout', method: 'post' },
        user: { url: '/sign/user-login', method: 'get' }
      }
    }
  }
}

基本索引 ('/')

<template>
  <div class="container">
    <div>
      <Logo />
      <h1 class="title">Learn Nuxt</h1>
      <div class="links">
        <a href="https://nuxtjs.org/" target="_blank" rel="noopener noreferrer" class="button--green">
          Documentation
        </a>
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          rel="noopener noreferrer"
          class="button--grey"
        >
          GitHub
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['isAuthenticated', 'loggedInUser']),
  },
}
</script>
4

1 回答 1

1

在您的 vuex 商店state中，您的 getter 中的参数只能访问本地状态。您无法auth按照您尝试的方式访问状态。

在一个 vuex 模块中，一个 getter 有 4 个参数，分别是本地状态、本地 getter、根状态和根 getter。因此，如果您像这样重写您的吸气剂，它可能会起作用：

export const getters = {
  isAuthenticated(state, getters, rootState) {
    return rootState.auth.loggedIn
  },

  loggedInUser(state, getters, rootState) {
    return rootState.auth.user
  }}
}

但我仍然认为这样做有点多余。我会在您的默认布局中替换isAuthenticated为。this.$auth.loggedInnuxt-auth 模块全局注入$auth实例，这意味着您可以在任何地方使用this.$auth.

于 2021-05-27T02:23:43.780 回答