質問編集履歴

4

追記

2021/03/26 10:13

投稿

TMTN
TMTN

score42

test CHANGED
File without changes
test CHANGED
@@ -20,6 +20,40 @@
20
20
 
21
21
 
22
22
 
23
+ ```ここに言語を入力
24
+
25
+
26
+
27
+ ※追記
28
+
29
+ header.vue
30
+
31
+
32
+
33
+ return {
34
+
35
+ authenticatedUser: "",
36
+
37
+ };
38
+
39
+ ```
40
+
41
+
42
+
43
+ 上記の指定が抜けていたので、追加したらログアウトの挙動は、
44
+
45
+ ログイン状態では表示され、ログアウト状態では非表示になりました。
46
+
47
+
48
+
49
+ しかし、ログインのリンクは常に表示される形となっています。。
50
+
51
+
52
+
53
+ ログインボタンもログイン状態では非表示、ログアウト状態では表示させたいです。
54
+
55
+
56
+
23
57
  ②上記に続きますが、ログインしないとmypageのページが閲覧できないようにしたいです。
24
58
 
25
59
 

3

誤字修正しました。

2021/03/26 10:12

投稿

TMTN
TMTN

score42

test CHANGED
File without changes
test CHANGED
@@ -20,7 +20,7 @@
20
20
 
21
21
 
22
22
 
23
- ②上記に続きますが、ログインしないと全てのページ閲覧できないようにしたいです。
23
+ ②上記に続きますが、ログインしないとmypageのページ閲覧できないようにしたいです。
24
24
 
25
25
 
26
26
 
@@ -56,6 +56,8 @@
56
56
 
57
57
  <router-link to="/signin" class="header-link">ログイン</router-link>
58
58
 
59
+ <router-link to="/mypage" class="header-link">マイページ</router-link>
60
+
59
61
  <button class="header-link" @click="signOut" v-if="authenticatedUser">ログアウト</button>
60
62
 
61
63
  </div>

2

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

2021/03/26 09:56

投稿

TMTN
TMTN

score42

test CHANGED
@@ -1 +1 @@
1
- vue.js × firebaseにてログインは「ログアウト」に変更させて、ログアウトは「ログインページ」に戻すようにしたい
1
+ vue.js × firebaseにてログイン状態では「ログアウト」に変更させて、ログアウト状態では「ログインページ」にしたいです
test CHANGED
@@ -8,15 +8,15 @@
8
8
 
9
9
 
10
10
 
11
- そこで現在、vueにてfirebaseと連携させて新規登録、ログインの追加するところまでできましたが、
11
+ そこで現在、vueにてfirebaseと連携させて新規登録、ログイン、ログアウトの追加するところまでできましたが、
12
-
12
+
13
- 以下のことを実装したいのですが、調べて試してみましたが上手く実装されず苦戦してます・・
13
+ 以下のことを実装したいのですが、調べて試してみましたが上手く実装されず苦戦してます・・
14
-
15
-
16
-
14
+
15
+
16
+
17
- ①ログイン成功後、メインページに遷移するようにしておりますが、
17
+ ①ログイン成功後、mypageに遷移するようにしておりますが、
18
-
18
+
19
- ヘッダー部をログインは「ログアウト」に変更させて、ログアウトは「ログインページ」に戻すようにしたいです。
19
+ ヘッダー部をログイン状態では「ログアウト」に変更させて、ログアウト状態では「ログインページ」にしたいです。
20
20
 
21
21
 
22
22
 
@@ -24,18 +24,6 @@
24
24
 
25
25
 
26
26
 
27
- ③新規登録にて、メールアドレスとパスワード入力後、登録ボタンを押したら、ログインページに遷移するようにしたいです。
28
-
29
-
30
-
31
- 以上、3点初歩的なことかもしれませんが、分かる方お力添えをいただきたいです。
32
-
33
-
34
-
35
- よろしくお願いいたします。
36
-
37
-
38
-
39
27
 
40
28
 
41
29
  ### 該当のソースコード
@@ -258,19 +246,19 @@
258
246
 
259
247
  <template>
260
248
 
261
- <div class="signin">
249
+ <div class="signup">
262
-
250
+
263
- <h2>ログイン</h2>
251
+ <h2>新規登録</h2>
264
252
 
265
253
  <input type="text" placeholder="Email" v-model="email" />
266
254
 
267
255
  <input type="password" placeholder="Password" v-model="password" />
268
256
 
269
- <button class="btn" @click="signIn">ログイン</button>
257
+ <button class="btn-signup" @click="signUp">登録</button>
270
258
 
271
259
  <p>
272
260
 
273
- アカウントをお持ちでない方は
261
+ 既に登録済みの方は
274
262
 
275
263
  <router-link to="/signup">こちらへ</router-link>
276
264
 
@@ -290,9 +278,9 @@
290
278
 
291
279
  export default {
292
280
 
293
- name: "Signin",
281
+ name: "Signup",
294
-
282
+
295
- data: function() {
283
+ data() {
296
284
 
297
285
  return {
298
286
 
@@ -306,33 +294,27 @@
306
294
 
307
295
  methods: {
308
296
 
309
- signIn: function() {
297
+ signUp: function() {
310
-
311
- console.log(this.email);
312
298
 
313
299
  firebase
314
300
 
315
301
  .auth()
316
302
 
317
- .signInWithEmailAndPassword(this.email, this.password)
303
+ .createUserWithEmailAndPassword(this.email, this.password)
318
-
319
- .then(
304
+
320
-
321
- () => {
305
+ .then(user => {
322
-
306
+
323
- alert("ログインに成功しました。");
307
+ alert("登録に成功しました。", user.email);
324
-
308
+
325
- this.$router.push("/");
309
+ this.$router.push("/signin");
326
-
310
+
327
- },
311
+ })
328
-
312
+
329
- err => {
313
+ .catch(error => {
330
-
314
+
331
- alert("ログインに失敗しました。",err.message);
315
+ alert("登録情報が正くありせん。", error.message);
332
-
333
- }
316
+
334
-
335
- );
317
+ });
336
318
 
337
319
  }
338
320
 
@@ -346,7 +328,7 @@
346
328
 
347
329
  <style lang="scss">
348
330
 
349
- .signin {
331
+ .signup {
350
332
 
351
333
  height: 90vh;
352
334
 
@@ -370,7 +352,7 @@
370
352
 
371
353
  a {
372
354
 
373
- color: #008deb;
355
+ color: #eb6100;
374
356
 
375
357
  }
376
358
 
@@ -382,15 +364,15 @@
382
364
 
383
365
  }
384
366
 
385
- .btn {
367
+ .btn-signup {
386
-
368
+
387
- width: rem;
369
+ width: 5rem;
388
370
 
389
371
  margin: 1rem;
390
372
 
391
373
  color: #fff;
392
374
 
393
- background-color: #008deb;
375
+ background-color: #eb6100;
394
376
 
395
377
  padding: 0.5rem;
396
378
 
@@ -416,6 +398,8 @@
416
398
 
417
399
 
418
400
 
401
+
402
+
419
403
  ```
420
404
 
421
405
  ```ここに言語を入力
@@ -486,13 +470,15 @@
486
470
 
487
471
  .then(user => {
488
472
 
489
- alert("このメールアドレスを登録しました。", user.email);
473
+ alert("登録に成功しました。", user.email);
474
+
475
+ this.$router.push("/signin");
490
476
 
491
477
  })
492
478
 
493
479
  .catch(error => {
494
480
 
495
- alert("このメールアドレスは登録できませんでした。", error.message);
481
+ alert("登録情報が正しくありません。", error.message);
496
482
 
497
483
  });
498
484
 
@@ -600,7 +586,7 @@
600
586
 
601
587
  import First from "../views/first.vue";
602
588
 
603
- import firebase from "firebase";
589
+ import Mypage from "../views/mypage.vue";
604
590
 
605
591
 
606
592
 
@@ -618,40 +604,50 @@
618
604
 
619
605
  component: Main,
620
606
 
607
+ },
608
+
609
+ {
610
+
611
+ path: "/signin",
612
+
613
+ name: "Signin",
614
+
615
+ component: Signin,
616
+
617
+ },
618
+
619
+ {
620
+
621
+ path: "/signup",
622
+
623
+ name: "Signup",
624
+
625
+ component: Signup,
626
+
627
+ },
628
+
629
+ {
630
+
631
+ path: "/first",
632
+
633
+ name: "First",
634
+
635
+ component: First,
636
+
637
+ },
638
+
639
+ {
640
+
641
+ path: "/mypage",
642
+
643
+ name: "Mypage",
644
+
645
+ component: Mypage,
646
+
621
647
  meta: { requiresAuth: true },
622
648
 
623
649
  },
624
650
 
625
- {
626
-
627
- path: "/signin",
628
-
629
- name: "Signin",
630
-
631
- component: Signin,
632
-
633
- },
634
-
635
- {
636
-
637
- path: "/signup",
638
-
639
- name: "Signup",
640
-
641
- component: Signup,
642
-
643
- },
644
-
645
- {
646
-
647
- path: "/first",
648
-
649
- name: "First",
650
-
651
- component: First,
652
-
653
- },
654
-
655
651
  ];
656
652
 
657
653
 
@@ -668,40 +664,6 @@
668
664
 
669
665
 
670
666
 
671
- router.beforeEach((to, from, next) => {
672
-
673
- const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
674
-
675
- if (requiresAuth)
676
-
677
- firebase.auth().onAuthStateChanged(function (user) {
678
-
679
- if (user) {
680
-
681
- next()
682
-
683
- } else {
684
-
685
- next({
686
-
687
- path: '/signin',
688
-
689
- query: { redirect: to.fullPath }
690
-
691
- })
692
-
693
- }
694
-
695
- })
696
-
697
- } else {
698
-
699
- next() // next()
700
-
701
- }
702
-
703
- })
704
-
705
667
 
706
668
 
707
669
  export default router;

1

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

2021/03/26 09:49

投稿

TMTN
TMTN

score42

test CHANGED
File without changes
test CHANGED
@@ -56,7 +56,7 @@
56
56
 
57
57
  <router-link to="/" class="header-ttl">
58
58
 
59
- <span class="header-ttl-color">C</span>inema</router-link
59
+ <span class="header-ttl-color">C</span>inemary</router-link
60
60
 
61
61
  >
62
62
 
@@ -68,7 +68,7 @@
68
68
 
69
69
  <router-link to="/signin" class="header-link">ログイン</router-link>
70
70
 
71
- <router-link class="header-link" @click="signOut">ログアウト</router-link>
71
+ <button class="header-link" @click="signOut" v-if="authenticatedUser">ログアウト</button>
72
72
 
73
73
  </div>
74
74
 
@@ -80,9 +80,59 @@
80
80
 
81
81
  <script>
82
82
 
83
+ import firebase from "firebase";
84
+
85
+
86
+
83
87
  export default {
84
88
 
89
+ name: "signOut",
90
+
85
- methods: {},
91
+ methods: {
92
+
93
+ signOut: function() {
94
+
95
+ firebase
96
+
97
+ .auth()
98
+
99
+ .signOut()
100
+
101
+ .then(() => {
102
+
103
+ alert("ログアウトしました。");
104
+
105
+ this.$router.push("/signin");
106
+
107
+ })
108
+
109
+ .catch(() => {
110
+
111
+ alert("ログアウトができません。");
112
+
113
+ });
114
+
115
+ },
116
+
117
+ },
118
+
119
+ mounted() {
120
+
121
+ firebase.auth().onAuthStateChanged((user) => {
122
+
123
+ if (user) {
124
+
125
+ this.authenticatedUser = true;
126
+
127
+ } else {
128
+
129
+ this.authenticatedUser = false;
130
+
131
+ }
132
+
133
+ });
134
+
135
+ },
86
136
 
87
137
  };
88
138
 
@@ -194,6 +244,8 @@
194
244
 
195
245
 
196
246
 
247
+
248
+
197
249
  ```
198
250
 
199
251
  ```ここに言語を入力