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

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

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

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

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Q&A

0回答

212閲覧

firebase 認証サービス(google,github)を2つにすると発生する問題について

MasatofromMGSV

総合スコア21

Firebase

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

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

0グッド

2クリップ

投稿2019/12/10 14:18

編集2022/01/12 10:55

vue.js+firebaseでチュートリアルの写経をしています。
アプリのリンク:https://udemyvuex.netlify.com/
githubのコード:https://github.com/masal9pse/Udemyvuex
参考にしているチュートリアル:https://www.udemy.com/course/vuejs-firebase/learn/lecture/14204324#overview

挙動を説明すると、googleアカウントを登録するとAddresses.vue(今回、あまり問題に関係していないですが、一応下記にコードを記載しておきます)にページ遷移するというものです。

Addresses.vue

<template> <v-container text-xs-center justify-center> <v-layout row wrap> <v-flex xs12> <h1>連絡先一覧</h1> </v-flex> <v-flex xs12 mt-5 text-xs-right> <router-link :to="{ name: 'address_edit'}"> <v-btn color="info">連絡先追加</v-btn> </router-link> </v-flex> <v-flex xs12 mt-5 justify-center> <v-data-table :headers="headers" :items="addresses"> <template v-slot:items="props"> <td class="text-xs-left">{{ props.item.name }}</td> <td class="text-xs-left">{{ props.item.tel }}</td> <td class="text-xs-left">{{ props.item.email }}</td> <td class="text-xs-left">{{ props.item.address }}</td> <td class="text-xs-left"> <span> <router-link :to="{name: 'address_edit',params:{address_id:props.item.id }}"> <v-icon small class="mr-2">edit</v-icon> </router-link> </span> <span> <v-icon small class="mr-2" @click="deleteCofirm(props.item.id)">delete</v-icon> </span> </td> </template> </v-data-table> </v-flex> </v-layout> </v-container> </template> <script> import { mapActions } from "vuex"; export default { data() { return { headers: [ { text: "名前", value: "name" }, { text: "電話番号", value: "tel" }, { text: "メールアドレス", value: "email" }, { text: "住所", value: "address" }, { text: "操作", sortable: false } ], addresses: [] }; }, created() { this.addresses = this.$store.state.addresses; }, methods: { deleteCofirm(id) { if (confirm("削除してよろしいですか")) { this.deleteAddress({ id }); } }, ...mapActions(["deleteAddress"]) } }; </script> <style scoped> a { text-decoration: none; } </style>

#やりたいこと
このチュートリアルにgithubの認証を追加して、認証後Addresses.vueにページ遷移したい。つまり、googleの認証後の挙動と同じにしたいです。

やったこと

まず普通にgithub認証につながるボタンをフロントに表示してみました。
必要なコードのみ抜粋して、そのブランチの全コードはリンクを張っておきます。

router/index.js

import Vue from 'vue' import Router from 'vue-router' import Home from '../views/Home.vue' import Addresses from '../views/Addresses.vue' import AddressForm from '../views/AddressForm.vue' Vue.use(Router) export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', name: 'home', component: Home }, { path: '/addresses', name: 'addresses', component: Addresses }, { path: '/address/:address_id?/edit', name: 'address_edit', component: AddressForm }, { path: '/about', name: 'about', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') } ] })

store/index.js

import Vue from 'vue' import Vuex from 'vuex' import firebase from 'firebase' Vue.use(Vuex) export default new Vuex.Store({ state: { login_user: null, drawer: false, addresses: [], result: null }, getters: { userName: state => state.login_user ? state.login_user.displayName : '', photoURL: state => state.login_user ? state.login_user.photoURL : '', uid: state => state.login_user ? state.login_user.uid : null, //関数を返す関数 getAddressById: state => id => state.addresses.find(address => address.id === id) }, mutations: { setLoginUser(state, user) { state.login_user = user }, deleteLoginUser(state) { state.login_user = null }, toggleSideMenu(state) { if (state.drawer === false) { state.drawer = true } }, addAddress(state, { id, address }) { address.id = id; state.addresses.push(address); }, //mutationsは非同期処理以外を記入 updateAddress(state, { id, address }) { const index = state.addresses.findIndex(address => address.id === id) state.addresses[index] = address }, deleteAddress(state, { id }) { const index = state.addresses.findIndex(address => address.id === id) state.addresses.splice(index, 1) }, }, actions: { setLoginUser({ commit }, user) { commit('setLoginUser', user) }, deleteLoginUser({ commit }) { commit("deleteLoginUser"); }, googleLogin() { const google_auth_provider = new firebase.auth.GoogleAuthProvider(); firebase.auth().signInWithRedirect(google_auth_provider); }, logout() { firebase.auth().signOut(); }, githubLogin() { const github_auth_provider = new firebase.auth.GithubAuthProvider(); firebase.auth().signInWithRedirect(github_auth_provider); }, toggleSideMenu({ commit }) { commit("toggleSideMenu"); }, //まだデータ取得のみ addAddress({ getters, commit }, address) { if (getters.uid) { firebase.firestore().collection(`users/${getters.uid}/addresses`).add(address).then(doc => { commit("addAddress", { doc: doc.id, address }); }) } }, fetchAddresses({ getters, commit }) { firebase.firestore().collection(`users/${getters.uid}/addresses`).get().then(snapshot => { snapshot.forEach(doc => commit('addAddress', { id: doc.id, address: doc.data() })) }) }, updateAddress({ getters, commit }, { id, address }) { if (getters.uid) { firebase.firestore().collection(`users/${getters.uid}/addresses`).doc(id).update(address).then(() => { commit("updateAddress", { id, address }); }) } }, deleteAddress({ getters, commit }, { id }) { if (getters.uid) { firebase.firestore().collection(`users/${getters.uid}/addresses`).doc(id).delete().then(() => { commit("deleteAddress", { id }); }) } } }, modules: { } })

App.vue↓

<template> <v-app> <v-toolbar app> <v-toolbar-side-icon v-show="$store.state.login_user" @click="toggleSideMenu"></v-toolbar-side-icon> <v-toolbar-title class="headline text-uppercase"> <span>マイアドレス帳</span> </v-toolbar-title> <v-spacer></v-spacer> <v-toolbar-items v-if="$store.state.login_user"> <v-btn @click="logout">ログアウト</v-btn> </v-toolbar-items> </v-toolbar> <SideNav /> <v-content> <router-view /> </v-content> </v-app> </template> <script> import firebase from "firebase"; import { mapActions } from "vuex"; import SideNav from "./components/SideNav"; export default { name: "App", components: { SideNav }, data() { return { // }; }, //重要!!!!!!!!!! created() { firebase.auth().onAuthStateChanged(user => { if (user) { this.setLoginUser(user); this.fetchAddresses(); if (this.$router.currentRoute.name === "home") this.$router.push({ name: "addresses" }); } else { this.deleteLoginUser(); this.$router.push({ name: "home" }); } }); }, methods: { ...mapActions([ "toggleSideMenu", "setLoginUser", "googleLogin", "githubLogin", "logout", "deleteLoginUser", "fetchAddresses" ]) } }; </script>

全コード:https://github.com/masal9pse/Udemyvuex/tree/github

ためしたことの結果

しかし、この結果フロントに書かれた"githubでログイン"をクリックすると認証自体は成功するのですが、Addresses.vueにページ遷移しませんでした。そして重複がなんちゃら~みたいなエラーを吐きました。

devtool console

Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated", message: "Navigating to current location ("/") is not allowed", stack: "Error↵ at new NavigationDuplicated (webpack-int…modules/@firebase/util/dist/index.cjs.js:1315:21)"}message: "Navigating to current location ("/") is not allowed"name: "NavigationDuplicated"_name: "NavigationDuplicated"stack: "Error↵

イメージ説明
恐らく、認証で取得したIDがgoogleとgithubで被っているため、このようなエラーを吐いているのだと思います。(的外れかもしれません)
なので、それをgoogle,githubごとにIDの取得を分けて記述すればAddresses.vueに遷移する記述ができると思うのですが、IDを分ける記述をどうすればいいか分かりません。良ければアドバイスお願いします。

一応、下記リンクでgithubのトークンを用意するブランチを作成しましたがgoogle,githubと区別できるような記述が出来ていなのでエラーを吐いています。
https://github.com/masal9pse/Udemyvuex/tree/githubMove/src

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問