Не удается увидеть данные из базы данных, когда вы не вошли в систему. (Vue js) - PullRequest
0 голосов
/ 09 марта 2020

Когда я вошел в систему и попал на страницу стажировки (1016 *) (мои данные поступают из базы данных), я могу увидеть эти данные. Но когда я выхожу из системы, я go перехожу на ту же страницу, но теперь я больше не вижу данных. Что я здесь не так?

Это стажировка. vue страница

Здесь я получаю данные из базы Firebase:

<template>
  <div>
    <h1 class="table">List Item</h1>
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Internship name</th>
          <th>Internship location</th>
          <th>Education</th>
          <th>Niveau</th>
          <th>Availability</th>
          <th>To erect</th>
          <th>Company ID</th>
          <th>Address</th>
          <th>Phone number</th>
          <th>Website</th>
          <th colspan="2" v-if="isLoggedIn">Action</th>
        </tr>
      </thead>
      <tbody>
          <tr v-for="item of items" :key="item['.key']">
            <td>{{ item.name }}</td>
            <td>{{ item.location }}</td>
            <td>{{ item.education }}</td>
            <td>{{ item.niveau }}</td>
            <td>{{ item.availability }}</td>
            <td>{{ item.toErect }}</td>
            <td>{{ item.companyId }}</td>
            <td>{{ item.address }}</td>
            <td>{{ item.phoneNumber }}</td>
            <td>{{ item.website }}</td>
            <td v-if="isLoggedIn"><router-link :to="{ name: 'Edit', params: {id: item['.key']} }" class="btn btn-warning">Edit</router-link></td>
            <td v-if="isLoggedIn"><button @click="deleteItem(item['.key'])" class="btn btn-danger">Delete</button></td>
          </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import firebase from "firebase";
import { db } from '../../config/db';

export default {
  components: {
      name: 'Internship'
  },
  data() {
    return {
      items: [],
      isLoggedIn: false,
      currentUser: false
    }
  },
  firebase: {
    items: db.ref('items')
  },
  methods: {
    deleteItem(key) {
      this.$firebaseRefs.items.child(key).remove();
    }
  },
  created() {
    if(firebase.auth().currentUser) {
      this.isLoggedIn = true;
      this.currentUser = firebase.auth().currentUser.email;
    }
  }
}
</script>

А это мое приложение. vue page

Здесь вы можете увидеть мою навигационную панель и маршруты.

<template>
  <div id="app">
    <nav class="navbar navbar-expand-lg navbar-light navbar">
      <h1 class="default-color"><router-link :to="{ name: 'Index' }" class="default-color">Stage Finder</router-link></h1>
      <button class="navbar-toggler" type="button" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon" @click="isHidden = !isHidden"></span>
      </button>
      <div class="navbar-collapse" v-if="!isHidden">
        <ul class="navbar-nav mr-auto"></ul>
        <li v-if="isLoggedIn" class="nav"><span class="currentUser">{{currentUser}}</span></li>
        <ul class="navbar-nav">
          <li v-if="isLoggedIn" class="nav-item"><router-link :to="{ name: 'Add' }" class="nav-link">Add Item</router-link></li>
          <li v-if="isLoggedIn" class="nav-item"><router-link :to="{ name: 'Internship' }" class="nav-link">Internships</router-link></li>
          <li v-if="!isLoggedIn" class="nav-item"><router-link :to="{ name: 'Internship' }" class="nav-link">Internships</router-link></li>
          <li v-if="isLoggedIn" class="nav-item"><router-link :to="{ name: 'Profile' }" class="nav-link">Profile</router-link></li>
          <li v-if="!isLoggedIn" class="nav-item"><router-link :to="{ name: 'Sign in' }" class="nav-link">Sign in</router-link></li>
          <li v-if="!isLoggedIn" class="nav-item"><router-link :to="{ name: 'Sign up' }" class="nav-link">Sign up</router-link></li>
          <li v-if="isLoggedIn" class="nav-item"><button @click="logout" class="nav-link btn black">Logout</button></li>
        </ul>
      </div>
    </nav>

    <div class="gap">
      <router-view></router-view>
    </div>
  </div>
</template>

<style lang="css">
@import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

/* standards */

.btn-primary, .navbar {
  background-color: #f5940b;
  border-color: #f5940b;
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary:link, .btn-primary:visited {
  background-color: #DF9347;
}

.defaultColor {
  color: white;
}

/* */

.navbar-light .navbar-brand {
  color: white;
}

.navbar-light .navbar-nav .nav-link {
  color: white;
}

.gap {
  padding-top: 50px;
}

.currentUser {
  margin-right: 50px;
  font-weight: bold;
  text-align: center;
  color: white;
  background-color: black;
  border-radius: 15px;
  padding-left: 10px;
  padding-right: 10px;
}

.default-color {
  color: white;
  text-decoration: none;
}

.default-color:hover {
  color: white;
  text-decoration: none;
}

.navbar-light .navbar-nav .nav-link {
  font-weight: 500;
}

.table {
  margin-left: 50px;
  margin-right: 50px;
}
</style>

<script>
import firebase from "firebase";
export default {
  name: "app",
  data() {
    return {
      isLoggedIn: false,
      currentUser: false,
      isHidden: false
    };
  },
  methods: {
    logout() {
      firebase.auth().signOut().then(() => {
        this.$router.push('/Signin')
        location.reload();
      })
    }
  },
  created() {
    if(firebase.auth().currentUser) {
      this.isLoggedIn = true;
      this.currentUser = firebase.auth().currentUser.email;
    }
  }
};
</script>
...