Question

我有一个具有2个菜单的Vue应用，并且我开始使用Auth0实施身份验证。我遵循了一个教程，并做了一些正确的事情，受保护的路由受到了保护，当身份验证失败时，它会转到/about。

在我的app.js文件中，我正在那里进行身份验证，并拆分了菜单的

<template>
  <div id="app">
    <header id="websiteHeader">
      <a href="/" id="logo">Trade Mentor</a>

      <nav id="publicNav" v-if="!isLoggedIn">
        <router-link to="/about">About</router-link> |
        <a href="#" v-on:click.prevent="logMeIn()">Log In</a>
      </nav>

      <nav id="loggedInNav" v-if="isLoggedIn">
        <router-link to="/trading">Trading</router-link> |
        <router-link to="/editRules">Edit Rules</router-link> |
        <router-link to="/manageAccount">Manage Account</router-link> |
        <a href="#" v-on:click.prevent="logout()">Logout</a>
      </nav>

    </header>
    <router-view/>
  </div>
</template>

<script>
import { login, isLoggedIn, logout, handleAuth } from "../utils/auth";

  export default {
    data: () => {
      return {
        isLoggedIn: false
      }
    },
      methods: {
      logMeIn() {
        login();
      },
        logout() {
        logout();
        this.isLoggedIn = false;
        this.$router.push('/');

        }
    },
    beforeMount() {
      handleAuth((err) => {
        if(err) {
          console.log(err);
          return;
        }
        this.$router.push("/manageAccount")

      })
    },
    mounted() {
      this.isLoggedIn = isLoggedIn()
    }
  }

</script>

问题是我的isLoggedIn始终未定义，下面是../utils/auth中的文件，其中定义了isLoggedIn，该文件应根据身份验证时间的状态解析为true / false剩下的。

import auth0 from 'auth0-js';
import { store } from '../src/store';

const webAuth = new auth0.WebAuth({
  domain: 'real-crypto.auth0.com',

  responseType: 'token id_token',
  scope: 'openid profile'
});

let tokens = {};
let userProfile = {};

const login = () => {
  webAuth.authorize();
};

const handleAuth = cb => {
  webAuth.parseHash((err, authResult) => {
    if (authResult && authResult.accessToken && authResult.idToken) {
      tokens.accessToken = authResult.accessToken;
      tokens.idToken = authResult.idToken;
      tokens.expiry = new Date().getTime() + authResult.expiresIn * 1000;
      userProfile = authResult.idTokenPayload;
      cb();
    }
  });
};

const isLoggedIn = () => {
  return tokens.accessToken && new Date().getTime() < tokens.expiry;
};

const logout = () => {
  tokens = {};
};

const getProfile = () => {
  return userProfile;
};

export { login, logout, handleAuth, isLoggedIn, getProfile };

因此isLoggedIn()应该解析为true，并且应该显示带有我的用户资源的菜单，但始终未定义。似乎在呈现组件之前它正在运行isLoggedIn，所以我将其添加到了mounted函数中，但是它仍然没有任何作用吗？

具有Auth0身份验证的Vue应用无法正确显示状态

0 个答案: