Aws Amplifyを使用して、SSR時にユーザー情報を取得、Storeへ格納したいです。
SSRでAmplifyを使用すると必ず固定のエラーが表示され使用できませんでした。
AmplifyはSSR対応していないのでしょうか?
下記にソースコードとエラー内容を載せさせていただきます。
エラー内容(ブラウザ表示)
各種ソースコード
/store/index.js
javascript
1import {Auth} from 'aws-amplify' // ここのファイルのAuthを使用しないようにするとエラーがでない(SSR時に読み込むとエラー発生) 2 3export const state = () => { 4 return { 5 auth: null 6 } 7} 8 9export const mutations = { 10 setAuth(state, auth) { 11 state.auth = auth 12 } 13} 14 15export const actions = { 16 nuxtServerInit({commit}) { 17 Auth.currentAuthenticatedUser({ 18 bypassCache: false 19 }) 20 .then(auth => { 21 commit('setAuth', auth) 22 }) 23 .catch(err => { 24 console.error(err) 25 }); 26 } 27} 28
/middleware/auth.js
javascript
1import _ from 'lodash' 2 3export default async ({store, redirect}) => { 4 if (_.isNull(store.state.auth)) { 5 redirect('/signin') 6 } 7}
/plugins/amplify.js
javascript
1import Vue from 'vue' 2import Amplify, * as AmplifyModules from 'aws-amplify' 3import {AmplifyPlugin, components} from 'aws-amplify-vue' 4import aws_exports from '../aws-exports' 5 6Vue.use(AmplifyPlugin) 7Vue.use(AmplifyModules) 8 9Vue.component(components) 10 11export default async () => { 12 Amplify.configure(aws_exports) 13}
/pages/index.vue
vue
1<template> 2 <div> 3 ... 4 </div> 5</template> 6 7<script> 8 export default { 9 middleware: 'auth' 10 } 11</script>
nuxt.config.js
javascript
1export default { 2 mode: 'universal', 3 /* 4 ** Headers of the page 5 */ 6 head: { 7 titleTemplate: '%s - ' + process.env.npm_package_name, 8 title: process.env.npm_package_name || '', 9 meta: [ 10 {charset: 'utf-8'}, 11 {name: 'viewport', content: 'width=device-width, initial-scale=1'}, 12 {hid: 'description', name: 'description', content: process.env.npm_package_description || ''} 13 ], 14 link: [ 15 {rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'} 16 ] 17 }, 18 /* 19 ** Customize the progress-bar color 20 */ 21 loading: {color: '#fff'}, 22 /* 23 ** Global CSS 24 */ 25 css: [], 26 /* 27 ** Plugins to load before mounting the App 28 */ 29 plugins: [ 30 {src: '~plugins/amplify.js', mode: 'client', ssr: false} 31 ], 32 /* 33 ** Nuxt.js modules 34 */ 35 modules: [], 36 /* 37 ** Build configuration 38 */ 39 build: { 40 /* 41 ** You can extend webpack config here 42 */ 43 extend(config, ctx) { 44 } 45 } 46}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。