問題

我正在研究一個Nuxt.js project.here,我想在Nuxt-Store中使用localStorage,並且還想從Nuxt-Middleware訪問localStorage值.它顯示錯誤.

localStorage沒有定義.

我怎樣才能解決這個問題?

這裡,store/index.js的程式碼示例

 setUser(state, { user }){
    state.user = user
    state.isLoggedIn = true
    localStorage.setItem('user', JSON.stringify(user));
    localStorage.setItem('isLoggedIn', state.isLoggedIn);
},
 

我的中介軟體程式碼在這裡 –

 export default function({ store, redirect, route}) {
const user = localStorage.getItem('user');
const loggedStatus = store.getters['isLoggedIn']

if (user) {
    if(route.path == '/login' || route.path == '/user/temporary'){
        return redirect('/')
    } 
       return 
}


if(!user){
    return redirect('/login')
}

}
 

  最佳答案

為了只在客戶端執行此程式碼,您需要向您的中介軟體新增一些邏輯.檢查 docs 以讀取更多內容.

在通用模式下,中介軟體將被稱為server-side(在Nuxt應用程式的第一個請求或頁面重新整理時)和clientside導航到更多路由時.在SPA模式下,中介軟體將在第一個請求和導航到更多路由時被稱為client-side.

在中介軟體函式中新增以下內容:

 export default function({ store, redirect, route }) {

  // Do not run on server
  if (process.server) {
    return
  }

  const user = localStorage.getItem('user')
  const loggedStatus = store.getters['isLoggedIn']

  if (user) {
    if (route.path == '/login' || route.path == '/user/temporary') {
      return redirect('/')
    }
    return
  }

  if (!user) {
    return redirect('/login')
  }
}

 

如果您正在使用 SPA 模式執行,那麼您就完成了。

現在,如果您在通用模式下執行,這個中介軟體將不再在伺服器上執行,但它也不會在第一個應用程式負載上執行。

在通用模式下,中介軟體將被稱為server-side(在Nuxt應用程式的第一個請求或頁面重新整理時)和client-side導航到更多路由時

解決這個問題的最簡單方法是新增一個只在客戶端上執行的外掛.取自這個問題,將此外掛新增到您的nuxt.config.js,注意新增.client postfix:

 // nuxt.config.js
export default {
  plugins: [
    // .client will only be run client side on initial app load
    '~/plugins/init.client.js'
  ]
}
 

在這個外掛中,您可以定義中介軟體具有的相同邏輯:

 // /plugins/init.client.js
export default function({ store, redirect, route }) {

  const user = localStorage.getItem('user')
  const loggedStatus = store.getters['isLoggedIn']

  if (user) {
    if (route.path == '/login' || route.path == '/user/temporary') {
      return redirect('/')
    }
    return
  }

  if (!user) {
    return redirect('/login')
  }
}
 

這個例子是在 DRY 原則面前飛行的,目的是作為一個例子來處理 Nuxt 中介軟體的侷限性。

希望這有幫助!

  相同標籤的其他問題

javascriptvuexnuxt.js