質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Cloud Firestore

Cloud Firestore は、自動スケーリングと高性能を実現し、アプリケーション開発を簡素化するように構築された NoSQLドキュメントデータベースです。

Q&A

解決済

1回答

970閲覧

【Vue × Firebase】新規登録時に取得したuidを元にマイページにページ遷移させたいです。

TMTN

総合スコア52

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Cloud Firestore

Cloud Firestore は、自動スケーリングと高性能を実現し、アプリケーション開発を簡素化するように構築された NoSQLドキュメントデータベースです。

0グッド

0クリップ

投稿2021/04/25 20:22

#新規登録時に取得したuidを元にマイページにページ遷移させたいです。

現状、新規登録にてuidとuserName、時間を取得してFirestoreにデータを追加してます。

そこで取得したuidを元に各マイページにページ遷移するようにしたいのですが、
vueルーターとヘッダーにて今はパスを「/mypage」としています。

ここの記載をどのように記載してあげたら良いのか分からず困っております。

分かる方いらっしゃいましたらお力添えをいただきたいです。

よろしくお願いいたします。

#新規登録

<template> <div> <Header /> <div class="signup flex"> <div class="signup-inner flex"> <h2>新規登録</h2> <input type="text" placeholder="Username" v-model="userName" /> <input type="text" placeholder="Email" v-model="email" /> <input type="password" placeholder="Password" v-model="password" /> <button class="btn-signup" @click.prevent="signUp">登録</button> <p> 既に登録済みの方は <router-link to="/signin">こちらへ</router-link> </p> </div> </div> </div> </template>
export default { name: "Signup", data() { return { email: "", password: "", userName: "", }; }, components: { Header, }, methods: { signUp() { firebase .auth() .createUserWithEmailAndPassword(this.email, this.password) .then((userCredential) => { this.$swal("登録に成功しました。", { icon: "success", }); return firebase .firestore() .collection("users") .doc(userCredential.user.uid) .set({ userName: this.userName, time: firebase.firestore.FieldValue.serverTimestamp(), }); }) .then(() => { this.$router.push("/signin"); }) .catch(() => { this.$swal("登録情報が正しくありません。", { icon: "error", }); }); }, }; </script>

新規登録にてuidとuserName、時間を取得してFirestoreにデータを追加してます。

#vueルーター

import Vue from "vue"; import VueRouter from "vue-router"; import Signup from "../views/signup.vue"; import Mypage from "../views/mypage.vue"; import firebase from "firebase"; Vue.use(VueRouter); const routes = [ { path: "/signup", name: "Signup", component: Signup, }, { path: "/mypage", name: "Mypage", component: Mypage, meta: { requiresAuth: true }, },

#ヘッダー

<template> <header class="header"> <router-link to="/" class="header-ttl neon"> <span class="header-ttl-color neon2">C</span>inema </router-link> <ul class="header-menu"> <li> <router-link to="/mypage" class="header-link neon3 flash">MYPAGE</router-link> </li> </ul> </header> </template>

#試してみた事

####vueルーター

import Vue from "vue"; import VueRouter from "vue-router"; import Signup from "../views/signup.vue"; import Mypage from "../views/mypage.vue"; import firebase from "firebase"; Vue.use(VueRouter); const routes = [ { path: "/signup", name: "Signup", component: Signup, }, { path: "/mypage/:currentUser.uid.id", name: "Mypage", component: Mypage, meta: { requiresAuth: true }, },

####ヘッダー

<template> <header class="header"> <router-link to="/" class="header-ttl neon"> <span class="header-ttl-color neon2">C</span>inema </router-link> <ul class="header-menu"> <li> <router-link to="`/mypage/${currentUser.uid.id}`" class="header-link neon3 flash">MYPAGE</router-link> </li> </ul> </header> </template>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

signUp() { firebase .auth() .createUserWithEmailAndPassword(this.email, this.password) //ユーザーから提供されたメールアドレスとパスワードを検証し、それらをcreateUserWithEmailAndPassword メソッドに渡す。 .then((userCredential) => { this.$swal("登録に成功しました。", { icon: "success", }); this.uid = userCredential.user.uid; return firebase .firestore() .collection("users") .doc(userCredential.user.uid) .set({ name: this.name, time: firebase.firestore.FieldValue.serverTimestamp(), uid: userCredential.user.uid, //各マイページにページ遷移する為にuidをfirestoreに格納 }); }) .then(() => { this.$router.push(`/mypage/${this.uid}`); //新規登録後、該当ページに遷移 })

上記のようにすることで改善いたしました。

投稿2021/04/28 05:57

TMTN

総合スコア52

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問