質問編集履歴

追記

2021/03/26 10:13

投稿

TMTN

スコア53

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -9,6 +9,23 @@
 ①ログイン成功後、mypageに遷移するようにしておりますが、
 ヘッダー部をログイン状態では「ログアウト」に変更させて、ログアウト状態では「ログインページ」にしたいです。
+```ここに言語を入力
+※追記
+header.vue
+ return {
+      authenticatedUser: "",
+    };
+```
+上記の指定が抜けていたので、追加したらログアウトの挙動は、
+ログイン状態では表示され、ログアウト状態では非表示になりました。
+しかし、ログインのリンクは常に表示される形となっています。。
+ログインボタンもログイン状態では非表示、ログアウト状態では表示させたいです。
 ②上記に続きますが、ログインしないとmypageのページが閲覧できないようにしたいです。

誤字修正しました。

2021/03/26 10:12

投稿

TMTN

スコア53

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -9,7 +9,7 @@
 ①ログイン成功後、mypageに遷移するようにしておりますが、
 ヘッダー部をログイン状態では「ログアウト」に変更させて、ログアウト状態では「ログインページ」にしたいです。
-②上記に続きますが、ログインしないと全てのページ閲覧できないようにしたいです。
+②上記に続きますが、ログインしないとmypageのページが閲覧できないようにしたいです。
 ### 該当のソースコード
@@ -27,6 +27,7 @@
       <router-link to="/first" class="header-link">初めての方へ</router-link>
       <router-link to="/signup" class="header-link">新規登録</router-link>
       <router-link to="/signin" class="header-link">ログイン</router-link>
+      <router-link to="/mypage" class="header-link">マイページ</router-link>
       <button class="header-link" @click="signOut" v-if="authenticatedUser">ログアウト</button>
     </div>
   </header>

ログアウトボタン実装しました。

2021/03/26 09:56

投稿

TMTN

スコア53

title CHANGED Viewed

	@@ -1,1 +1,1 @@
1	- vue.js × firebaseにてログイン後は「ログアウト」に変更させて、ログアウト後は「ログインページ」に~~戻すように~~したい
1	+ vue.js × firebaseにてログイン状態では「ログアウト」に変更させて、ログアウト状態では「ログインページ」にしたいです

body CHANGED Viewed

@@ -3,21 +3,15 @@
 現在、vue.jsにてポートフォリオを作成しております。
 （プログラミング自体勉強し初めて約３ヶ月ほどと浅いため、ご了承のほどお願いします。。）
-そこで現在、vueにてfirebaseと連携させて新規登録、ログインの追加するところまでできましたが、
+そこで現在、vueにてfirebaseと連携させて新規登録、ログイン、ログアウトの追加するところまでできましたが、
-以下のことを実装したいのですが、調べて試してみましたが上手く実装されず苦戦してます・・
+以下のことを実装したいのですが、調べて試してみましたが上手く実装されず苦戦してます・・。
-①ログイン成功後、メインページに遷移するようにしておりますが、
+①ログイン成功後、mypageに遷移するようにしておりますが、
-ヘッダー部をログイン後は「ログアウト」に変更させて、ログアウト後は「ログインページ」に戻すようにしたいです。
+ヘッダー部をログイン状態では「ログアウト」に変更させて、ログアウト状態では「ログインページ」にしたいです。
 ②上記に続きますが、ログインしないと全てのページ閲覧できないようにしたいです。
-③新規登録にて、メールアドレスとパスワード入力後、登録ボタンを押したら、ログインページに遷移するようにしたいです。
-以上、３点初歩的なことかもしれませんが、分かる方お力添えをいただきたいです。
-よろしくお願いいたします。
 ### 該当のソースコード
 ```ここに言語名を入力
@@ -128,13 +122,13 @@
 ◆singin.vue
 <template>
-  <div class="signin">
+  <div class="signup">
-    <h2>ログイン</h2>
+    <h2>新規登録</h2>
     <input type="text" placeholder="Email" v-model="email" />
     <input type="password" placeholder="Password" v-model="password" />
-    <button class="btn" @click="signIn">ログイン</button>
+    <button class="btn-signup" @click="signUp">登録</button>
     <p>
-      アカウントをお持ちでない方は
+      既に登録済みの方は
       <router-link to="/signup">こちらへ</router-link>
     </p>
   </div>
@@ -144,35 +138,32 @@
 import firebase from "firebase";
 export default {
-  name: "Signin",
+  name: "Signup",
-  data: function() {
+  data() {
     return {
       email: "",
       password: ""
     };
   },
   methods: {
-    signIn: function() {
+    signUp: function() {
-      console.log(this.email);
       firebase
         .auth()
-        .signInWithEmailAndPassword(this.email, this.password)
+        .createUserWithEmailAndPassword(this.email, this.password)
-        .then(
-          () => {
+        .then(user => {
-            alert("ログインに成功しました。");
+          alert("登録に成功しました。", user.email);
-            this.$router.push("/");
+          this.$router.push("/signin");
-          },
+        })
-          err => {
+        .catch(error => {
-            alert("ログインに失敗しました。",err.message);
+          alert("登録情報が正しくありません。", error.message);
-          }
-        );
+        });
     }
   }
 };
 </script>
 <style lang="scss">
-.signin {
+.signup {
   height: 90vh;
   display: flex;
   flex-flow: column nowrap;
@@ -184,17 +175,17 @@
   }
   a {
-    color: #008deb;
+    color: #eb6100;
   }
   input {
     margin: 10px 0;
     padding: 10px;
   }
-  .btn {
+  .btn-signup {
-    width: rem;
+    width: 5rem;
     margin: 1rem;
     color: #fff;
-    background-color: #008deb;
+    background-color: #eb6100;
     padding: 0.5rem;
     border-radius: 1rem;
     text-decoration: none;
@@ -207,6 +198,7 @@
 }
 </style>
 ```
 ```ここに言語を入力
@@ -242,10 +234,11 @@
         .auth()
         .createUserWithEmailAndPassword(this.email, this.password)
         .then(user => {
-          alert("このメールアドレスを登録しました。", user.email);
+          alert("登録に成功しました。", user.email);
+          this.$router.push("/signin");
         })
         .catch(error => {
-          alert("このメールアドレスは登録できませんでした。", error.message);
+          alert("登録情報が正しくありません。", error.message);
         });
     }
   }
@@ -299,7 +292,7 @@
 import Signin from "../views/signin.vue";
 import Signup from "../views/signup.vue";
 import First from "../views/first.vue";
-import firebase from "firebase";
+import Mypage from "../views/mypage.vue";
 Vue.use(VueRouter);
@@ -308,7 +301,6 @@
     path: "/",
     name: "Main",
     component: Main,
-    meta: { requiresAuth: true },
   },
   {
     path: "/signin",
@@ -325,6 +317,12 @@
     name: "First",
     component: First,
   },
+  {
+    path: "/mypage",
+    name: "Mypage",
+    component: Mypage,
+    meta: { requiresAuth: true },
+  },
 ];
 const router = new VueRouter({
@@ -333,23 +331,6 @@
   routes,
 });
-router.beforeEach((to, from, next) => {
-  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
-  if (requiresAuth)
-    firebase.auth().onAuthStateChanged(function (user) {
-      if (user) {
-        next()
-      } else {
-        next({
-          path: '/signin',
-          query: { redirect: to.fullPath }
-        })
-      }
-    })
-  } else {
-    next() // next()
-  }
-})
 export default router;

header.vueへログアウトボタンを作り、ログインとログアウトを実装しました。

2021/03/26 09:49

投稿

TMTN

スコア53

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -27,20 +27,45 @@
 <template>
   <header class="header">
     <router-link to="/" class="header-ttl">
-      <span class="header-ttl-color">C</span>inema</router-link
+      <span class="header-ttl-color">C</span>inemary</router-link
     >
     <div class="header-menu">
       <router-link to="/first" class="header-link">初めての方へ</router-link>
       <router-link to="/signup" class="header-link">新規登録</router-link>
       <router-link to="/signin" class="header-link">ログイン</router-link>
-      <router-link class="header-link" @click="signOut">ログアウト</router-link>
+      <button class="header-link" @click="signOut" v-if="authenticatedUser">ログアウト</button>
     </div>
   </header>
 </template>
 <script>
+import firebase from "firebase";
 export default {
+  name: "signOut",
-  methods: {},
+  methods: {
+    signOut: function() {
+      firebase
+        .auth()
+        .signOut()
+        .then(() => {
+          alert("ログアウトしました。");
+          this.$router.push("/signin");
+        })
+        .catch(() => {
+          alert("ログアウトができません。");
+        });
+    },
+  },
+  mounted() {
+    firebase.auth().onAuthStateChanged((user) => {
+      if (user) {
+        this.authenticatedUser = true;
+      } else {
+        this.authenticatedUser = false;
+      }
+    });
+  },
 };
 </script>
@@ -96,6 +121,7 @@
 }
 </style>
 ```
 ```ここに言語を入力