Приложение Vue с аутентификацией Auth0 не показывает состояние должным образом - PullRequest
Новая
       14

Приложение Vue с аутентификацией Auth0 не показывает состояние должным образом

0 голосов
/ 20 февраля 2019

У меня есть приложение 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, но он все еще не работает ни одной идеи?

...