javascript - 在中间件中访问 LocalStorage - NuxtJs

Question

好吧，我从 nuxt 开始，我有以下路线:

/home

/dashboard

/login

我想保护/dashboard，但仅限于使用 localStorage 中的 token 登录的用户。

我想到的最简单的方法是创建一个/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() 仪表板布局中添加同样的检查，但我无法返回 window not set mounted() 为时已晚，它可以仅在页面完全组装后检查。

那么我该如何实现呢？ 注意:我不打算为此项目使用任何 Vuex。

Answer 1

我用了cookie-universal-nuxt

在用于登录操作的 vuex 存储上，我设置了一个带有 token 的提交

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

并在中间件中访问它 中间件/auth.js

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