Question

我正在使用带有vuetify的vuejs创建SPA，并使用laravel / passport API进行身份验证。我很难确定导航图标的条件渲染。我想让未经身份验证的用户看不到它们，然后在用户经过身份验证并重定向到我的主页时显示它们。这是我的具有v-app和nav的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放在创建的方法中，则它最初记录为false，但刷新后为true。有人知道解决此问题的优雅方法吗？谢谢！

Answer 1

为此使用吸气剂，在这里beforeCreate并不重要，因为元素仍然无法使用，因此使用吸气剂最有意义，因为只有在组件可用时才会触发：

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

Answer 2

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

Vue.js验证后有条件地渲染导航项

2 个答案: