Доступ к LocalStorage в промежуточном программном обеспечении - NuxtJs

Question

Ну, я начинаю с nuxt, и у меня есть следующие маршруты:

/home

/dashboard

/login

Я хочу защитить панель инструментов /, но только для пользователей, вошедших с токеном в localStorage.

Простейший способ сделать это - создать файл /middleware/auth.js

.

export default function () {
  if (!window.localStorage.getItem('token')) {
    window.location = '/login'
  }
}

и зарегистрируйте его в компоненте /dashboard/index.vue.

<script>
export default {
  middleware: 'auth',
}
</script>

Но я не могу получить доступ к localStorage в промежуточном программном обеспечении, потому что LocalStorage на стороне клиента.

Я уже пытался добавить эту же проверку в макет панели инструментов created(), но я не могу вернуть окно, не установленное mounted() слишком поздно, оно может быть проверено только после полной сборки страницы.

Так как мне этого добиться? Примечание: я не собираюсь использовать Vuex для этого проекта.

Answer 1

Я использовал cookie-universal-nuxt

в хранилище vuex для действий при входе. Я установил коммит с помощью токена

window.$nuxt.$cookies.set('token', payload, {
            path: '/',
})

промежуточный слой / auth.js

export default (context) => {
    if (!context.app.context.app.$cookies.get('token')) {
        return context.redirect('/login')
    }
}

Answer 2

Вы можете использовать что-то вроде этого для хранения в nuxt, которое будет работать как на стороне клиента, так и на стороне сервера

https://github.com/alibaba-aero/nuxt-universal-storage