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

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

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

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

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuex

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

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Authentication

Authentication(認証)は正当性を認証する為の工程です。ログイン処理等で使われます。

解決済

[Nuxt.js]auth moduleで$auth.loggedInがtrueにならない

bardy
bardy

総合スコア3

Vue.js

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

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuex

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

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Authentication

Authentication(認証)は正当性を認証する為の工程です。ログイン処理等で使われます。

1回答

0評価

0クリップ

751閲覧

投稿2021/11/15 11:22

編集2021/11/16 05:28

前提・実現したいこと

サーバーサイドはRailsでdevise_token_auth、フロントはNuxt.jsでauth moduleを使って開発しています。

v-ifとv-elseを使って、ヘッダー部分の新規登録・ログインのボタンが、ログイン後にユーザーメニューのボタンに切り替わるような機能を実装したいのですが、

・ログインには成功し、Localstrageにトークンが保存され、ログアウトも出来る。

という状況です。

storeが有効になるよう、storeディレクトリに空のindex.jsファイルの作成もしています。

発生している問題・エラーメッセージ

・ログイン後に、$auth.state.auth.loggedInと$auth.loggedIn、$auth.userがfalseのまま
・ログイン後のリダイレクトも機能していない

Rails側のログはしっかり動いているので、バックエンド側には問題はないと考えているのですが、こういった場合はどのような原因が考えられますでしょうか。

該当のソースコード

ログインした際のrailsのログ Started POST "/api/v1/auth/sign_in" for ::1 at 2021-11-15 01:26:51 +0900 Processing by DeviseTokenAuth::SessionsController#create as HTML Parameters: {"email"=>"example@example.com", "password"=>"[FILTERED]", "session"=>{"email"=>"example@example.com", "password"=>"[FILTERED]"}} Completed 200 OK in 454ms (Views: 2.2ms | ActiveRecord: 38.9ms | Allocations: 6231)

vue

nuxt.config.js------ export default { server: { port: 8080 }, // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode ssr: false, // Global CSS: https://go.nuxtjs.dev/config-css css: [ ], // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins plugins: [ { src: '~/plugins/axios.js', ssr: false } ], // Auto import components: https://go.nuxtjs.dev/config-components components: true, // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules buildModules: [ // https://go.nuxtjs.dev/vuetify '@nuxtjs/vuetify', ], // Modules: https://go.nuxtjs.dev/config-modules modules: [ // https://go.nuxtjs.dev/axios '@nuxtjs/axios', '@nuxtjs/auth-next' ], // Axios module configuration: https://go.nuxtjs.dev/config-axios axios: { baseURL: 'http://localhost:3000' }, router: { middleware: ['auth'] }, auth: { redirect: { login: '/login', logout: '/login', callback: false, home: '/' }, strategies: { local: { token: { property: 'access_token' }, endpoints: { login: { url: '/api/v1/auth/sign_in', method: 'post', propertyName: false }, logout: { url: '/api/v1/auth/sign_out', method: 'post' }, user: { url: '/api/v1/auth/user', method: 'get', propertyName: false } } } } }, }

vue

/plugins/axios.js------ export default function({ $axios }) { $axios.onRequest(config => { config.headers.client = window.localStorage.getItem("client") config.headers["access-token"] = window.localStorage.getItem("access-token") config.headers.uid = window.localStorage.getItem("uid") config.headers["token-type"] = window.localStorage.getItem("token-type") }) $axios.onResponse(response => { if (response.headers.client) { localStorage.setItem("access-token", response.headers["access-token"]) localStorage.setItem("client", response.headers.client) localStorage.setItem("uid", response.headers.uid) localStorage.setItem("token-type", response.headers["token-type"]) } }) }

vue

login.vue------ <template> <v-app> <div class="mt-3"> <v-card class="mt-5 mx-auto" max-width="600"> <v-form ref="form"> <v-container> <v-row justify="center"> <p cols="12" class="mt-3 display-1 grey--text"> ログイン </p> <p>{{ $auth.loggedIn }}</p> </v-row> <v-row justify="center"> <v-col cols="12" md="10" sm="10"> <v-text-field v-model="email" label="Eメールアドレス" /> <p class="caption mb-0" /> </v-col> </v-row> <v-row justify="center"> <v-col cols="12" md="10" sm="10"> <v-text-field v-model="password" type="password" label="パスワード" /> </v-col> </v-row> <v-row justify="center"> <v-col cols="12" md="10" sm="10"> <v-btn block class="mr-4 blue white--text" @click="loginWithAuthModule" > ログイン </v-btn> </v-col> </v-row> </v-container> </v-form> </v-card> </div> </v-app> </template> <script> export default { middleware({ store, redirect }) { if(store.$auth.loggedIn) { redirect('/'); } }, data () { return { password: 'password', email: 'example@example.com' } }, methods: { async loginWithAuthModule () { await this.$auth.loginWith('local', { data: { email: this.email, password: this.password } }) .then((response) => { return response }, (error) => { return error }) } } } </script>

試したこと

Nuxt.jsでAuth Moduleを使ってログイン機能を実装する
【Nuxt.js】Auth Moduleでログイン機能を実装する ( + Ruby on Rails・devise_token_authで認証を行う)
【Vue.js】【CRUD】Vue.js(Nuxt.js)とRailsでユーザー新規登録・ログイン・退会・ログアウト・編集を実装してみる - Qiita
【ログイン機能】nuxtjs/auth-nextメモ

補足情報(FW/ツールのバージョンなど)

"@nuxtjs/auth-next": "5.0.0-1624817847.21691f1",
"@nuxtjs/axios": "^5.13.6",
"core-js": "^3.15.1",
"nuxt": "^2.15.7",
"vuetify": "^2.5.5"

ruby '2.6.8'
'rails', 6.1.4.1'

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

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

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuex

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

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Authentication

Authentication(認証)は正当性を認証する為の工程です。ログイン処理等で使われます。