前提・実現したいこと
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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。