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

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

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

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

Nuxt.js

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

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

Q&A

解決済

1回答

1022閲覧

Nuxt.js passport、vuex-persistedstateを使ったログイン認証でリロードするとミドルウェア時に読み込めていない

massy7

総合スコア45

Vue.js

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

Nuxt.js

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

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

0グッド

2クリップ

投稿2018/04/27 07:51

前提・実現したいこと

nuxt-community/express-template
Vue v2
express v4

ページ遷移だけでなくリロードでもMiddlewareを読み込むタイミングでストア情報を使いたい
or
Middlewareにストアを使わないでログインを確かめる方法があればそれでも良い

発生している問題

nuxt.jsを使う時にlocalStorageでstoreを永続化するを使用し、ログイン情報をStoreに保存し、ページをまたいでも、リロードしてもストアの情報が保存されていることが確認できた

Middlewareにてログインされていない、または権限が足りていない場合、ページにアクセスした際に401にリダイレクトorログインページにリダイレクトをする処理を追加した
この時、ページ遷移では問題ないが、ブラウザリロード時にMiddlewareが読み込まれている時点ではlocalStorageからstoreにデータが入っていないようで、必ずリダイレクトしてしまう

該当のソースコード

javascript

1// middleware/redirectIfNotLogin.js 2export default function ({ store, redirect }) { 3 // ログインしていない場合リダイレクト 4 if (!store.state.auth.loginUser) { 5 return redirect({name: 'auth'}) 6 } 7}

javascript

1// plugins/persisted-state.js 2import createPersistedState from 'vuex-persistedstate' 3 4export default ({store, isHMR}) => { 5 if (isHMR) return 6 7 if (process.client) { 8 window.onNuxtReady((nuxt) => { 9 createPersistedState()(store) 10 }) 11 } 12}

javascript

1// store/auth.js 2export const state = () => ({ 3 loginUser: null 4}) 5 6export const mutations = { 7 /** 8 * @param {object} user 9 */ 10 SET_USER: function (state, user) { 11 state.loginUser = user 12 } 13} 14 15export const actions = { 16 nuxtServerInit ({commit}, {req}) { 17 if (req.session && req.session.loginUser) { 18 commit('SET_USER', req.session.loginUser) 19 } 20 }, 21 login ({commit}, {email, password}) { 22 return fetch('/api/auth/login', { 23 credentials: 'same-origin', 24 method : 'POST', 25 headers : { 26 'Content-Type': 'application/json' 27 }, 28 body: JSON.stringify({ 29 email, 30 password 31 }) 32 }).then((res) => { 33 if (res.status === 401) { 34 throw new Error('Email address、Passwordが違います。') 35 } 36 else { 37 return res.json() 38 } 39 }).then((loginUser) => { 40 commit('SET_USER', loginUser) 41 }) 42 }, 43 logout ({commit}) { 44 return fetch('/api/auth/logout', { 45 credentials: 'same-origin', 46 method : 'POST' 47 }).then(() => { 48 commit('SET_USER', null) 49 }) 50 } 51} 52

javascript

1// nuxt.config.js 2... 3 plugins: [ 4 { src: '~plugins/persisted-state.js', ssr: false } 5 ], 6 mode: 'spa' 7...

javascript

1// express api server 2import { Router } from 'express' 3import passport from './passport' 4 5const router = Router() 6 7router.post('/auth/login', function (req, res, next) { 8 passport.authenticate('local', function (err, user, info) { 9 if (err) { 10 return res.status(401).send(err) 11 } 12 if (!user) { 13 return res.status(401).send() 14 } 15 req.session.loginUser = { 16 id : user.id, 17 role : user.role 18 } 19 req.logIn(user, function (err) { 20 if (err) { 21 return res.json(err) 22 } 23 return res.json({ 24 id : user.id, 25 role : user.role 26 }) 27 }) 28 })(req, res, next) 29}) 30 31router.post('/auth/logout', function (req, res) { 32 delete req.session.loginUser 33 res.json({ ok: true }) 34}) 35 36export default router 37

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

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

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

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

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

guest

回答1

0

ベストアンサー

onNuxtReadyがMiddlewareの後に走るのでNGなようです。
また、nuxtServerInitの箇所はmode=spaなので動作していないと思われます。

私の場合はstateにtokenを持たせてspaで動かしていますが、下記のようにするといかがでしょうか?

javascript

1// store/auth.js 2import createPersistedState from "vuex-persistedstate" 3・・・ 4export const actions = { 5 nuxtClientInit ({ commit, state, dispatch }, { req }) { 6 createPersistedState()(this) 7 }, 8・・・ 9

javascript

1//plugins/nuxt-client-init.js 2export default async (context) => { 3 await context.store.dispatch('nuxtClientInit', context) 4}

javascript

1//nuxt.config.js 2 plugins: [ 3 { src: '~plugins/nuxt-client-init.js', ssr: false } 4 ], 5 mode: 'spa'

投稿2018/06/14 07:27

arc

総合スコア46

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問