Vuejs 在身份验证后有条件地呈现导航项答案

【问题标题】：Vuejs conditionally render nav items after authenticationVuejs 在身份验证后有条件地呈现导航项
【发布时间】：2019-01-10 12:32:39
【问题描述】：

我正在使用带有 vuetify 的 vuejs 创建一个 SPA，并使用 laravel/passport api 进行身份验证。我很难确定导航图标的条件渲染。 Obvs 我希望它们对未经身份验证的用户不可见，然后显示用户何时通过身份验证并重定向到我的主页。这是我的具有 v-app 和导航的 App.vue：

<template>
  <div>
<v-app>
  <v-navigation-drawer app absolute v-model="drawer"></v-navigation-drawer>
  <v-toolbar app color="primary" class="white--text">
    <v-toolbar-side-icon @click="drawer = !drawer" dark></v-toolbar-side-icon>
    <v-toolbar-title>App</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-toolbar-items class="hidden-sm-and-down">
      <v-tooltip bottom>
        <v-btn
          flat
          to="/"
          slot="activator"
          dark
          v-if="showNav"
        >
          <v-icon>home</v-icon>
        </v-btn>
        <span>Dashboard</span>
      </v-tooltip>
      <v-tooltip bottom>
        <v-btn
          flat
          to="/SubmitBug"
          slot="activator"
          dark
          v-if="showNav"
        >
          <v-icon>add</v-icon>
        </v-btn>
        <span>Submit a new Bug</span>
      </v-tooltip>
      <v-tooltip bottom>
        <v-btn
          flat
          to="/logout"
          slot="activator"
          dark
          v-if="showNav"
        >
          <v-icon>close</v-icon>
        </v-btn>
        <span>Logout</span>
      </v-tooltip>
    </v-toolbar-items>
  </v-toolbar>
  <v-content>
    <v-container fluid>
      <router-view></router-view>
    </v-container>
  </v-content>
  <v-footer class="pa-3 white--text" color="primary">
    <v-spacer></v-spacer>
    <div>&copy; {{ new Date().getFullYear() }} SomeCoolCompany</div>
  </v-footer>
</v-app>

<script>
export default {
  data: () => ({
    drawer: false,
    showNav: false
  }),
  beforeCreate () {
    User.checkAuth() ? this.showNav = true : this.showNav = false
    console.log(this.showNav)
  },
  created () {
    EventBus.$on('logout', () => {
      User.logout()
    })
  }
}
</script>

这里是实际执行 api 调用的 User.js 助手：

import AppStorage from './AppStorage'
import Auth from '../models/Auth'

class User {
  login (creds) {
    axios
      .post('/oauth/token', {
        grant_type: 'password',
        client_id: 2,
        client_secret: 'secret',
        username: creds.username,
        password: creds.password
      })
      .then(response => {
        this.setAuth(response.data)
      })
      .catch(error => console.error(error))
  }

  setAuth (data) {
    const token = new Auth(data).accessToken
    AppStorage.store(token)
  }

  checkAuth () {
    if (AppStorage.getToken()) {
      return true
    }
    return false
  }

  logout () {
    AppStorage.clear()
    window.location = '/'
  }
}

export default User = new User()

beforeCreate 钩子中的控制台日志记录为 true，但我必须刷新才能显示图标。 User.checkAuth() 返回一个布尔值。如果我将User.checkAuth() ? this.showNav = true : this.showNav = false 放在 created 方法中，它最初会记录为 false，但在刷新时会记录为 true。任何人都知道一个优雅的方式来处理这个？谢谢！

【问题讨论】：

标签： javascript laravel-5 vue.js single-page-application vuetify.js

【解决方案1】：

好的，通过在我的 User.js 登录方法中调用 window.location = '/' 而不是在登录组件的登录方法中调用 this.$router.replace('/') 来解决这个问题。时机就是一切。

【讨论】：

【解决方案2】：

为此使用 getter，beforeCreate 在这里无关紧要，因为无论如何元素都不可用，因此使用 getter 最有意义，因为它只会在组件可用时触发：

computed: {
  showNav() {
    return User.checkAuth()
  }
}

【讨论】：

同样的问题。 showNav 在初始渲染时为假，如果刷新则为真。
我的第一次尝试是设置showNav: User.checkAuth()，因为它只是一个布尔值，但这有同样的问题。
我还要补充一点，它们在注销时不显示，这是基于相同的检查。注销只是在同一个 User.js 帮助器类中清除本地存储。