質問編集履歴

追記

2021/03/26 10:13

投稿

TMTN

スコア53

test CHANGED Viewed

File without changes

test CHANGED Viewed

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

誤字修正しました。

2021/03/26 10:12

投稿

TMTN

スコア53

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -20,7 +20,7 @@
-②上記に続きますが、ログインしないと全てのページ閲覧できないようにしたいです。
+②上記に続きますが、ログインしないとmypageのページが閲覧できないようにしたいです。
@@ -56,6 +56,8 @@
       <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>

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

2021/03/26 09:56

投稿

TMTN

スコア53

test CHANGED Viewed

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

test CHANGED Viewed

@@ -8,15 +8,15 @@
-そこで現在、vueにてfirebaseと連携させて新規登録、ログインの追加するところまでできましたが、
+そこで現在、vueにてfirebaseと連携させて新規登録、ログイン、ログアウトの追加するところまでできましたが、
-以下のことを実装したいのですが、調べて試してみましたが上手く実装されず苦戦してます・・
+以下のことを実装したいのですが、調べて試してみましたが上手く実装されず苦戦してます・・。
-①ログイン成功後、メインページに遷移するようにしておりますが、
+①ログイン成功後、mypageに遷移するようにしておりますが、
-ヘッダー部をログイン後は「ログアウト」に変更させて、ログアウト後は「ログインページ」に戻すようにしたいです。
+ヘッダー部をログイン状態では「ログアウト」に変更させて、ログアウト状態では「ログインページ」にしたいです。
@@ -24,18 +24,6 @@
-③新規登録にて、メールアドレスとパスワード入力後、登録ボタンを押したら、ログインページに遷移するようにしたいです。
-以上、３点初歩的なことかもしれませんが、分かる方お力添えをいただきたいです。
-よろしくお願いいたします。
 ### 該当のソースコード
@@ -258,19 +246,19 @@
 <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>
@@ -290,9 +278,9 @@
 export default {
-  name: "Signin",
+  name: "Signup",
-  data: function() {
+  data() {
     return {
@@ -306,33 +294,27 @@
   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);
-          }
-        );
+        });
     }
@@ -346,7 +328,7 @@
 <style lang="scss">
-.signin {
+.signup {
   height: 90vh;
@@ -370,7 +352,7 @@
   a {
-    color: #008deb;
+    color: #eb6100;
   }
@@ -382,15 +364,15 @@
   }
-  .btn {
+  .btn-signup {
-    width: rem;
+    width: 5rem;
     margin: 1rem;
     color: #fff;
-    background-color: #008deb;
+    background-color: #eb6100;
     padding: 0.5rem;
@@ -416,6 +398,8 @@
 ```
 ```ここに言語を入力
@@ -486,13 +470,15 @@
         .then(user => {
-          alert("このメールアドレスを登録しました。", user.email);
+          alert("登録に成功しました。", user.email);
+          this.$router.push("/signin");
         })
         .catch(error => {
-          alert("このメールアドレスは登録できませんでした。", error.message);
+          alert("登録情報が正しくありません。", error.message);
         });
@@ -600,7 +586,7 @@
 import First from "../views/first.vue";
-import firebase from "firebase";
+import Mypage from "../views/mypage.vue";
@@ -618,40 +604,50 @@
     component: Main,
+  },
+  {
+    path: "/signin",
+    name: "Signin",
+    component: Signin,
+  },
+  {
+    path: "/signup",
+    name: "Signup",
+    component: Signup,
+  },
+  {
+    path: "/first",
+    name: "First",
+    component: First,
+  },
+  {
+    path: "/mypage",
+    name: "Mypage",
+    component: Mypage,
     meta: { requiresAuth: true },
   },
-  {
-    path: "/signin",
-    name: "Signin",
-    component: Signin,
-  },
-  {
-    path: "/signup",
-    name: "Signup",
-    component: Signup,
-  },
-  {
-    path: "/first",
-    name: "First",
-    component: First,
-  },
 ];
@@ -668,40 +664,6 @@
-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

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -56,7 +56,7 @@
     <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
     >
@@ -68,7 +68,7 @@
       <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>
@@ -80,9 +80,59 @@
 <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;
+      }
+    });
+  },
 };
@@ -194,6 +244,8 @@
 ```
 ```ここに言語を入力