保护NuxtJS中的路线

Question

好吧，我从nuxt开始，我有路线：

/home

/dashboard

/login

我只想为在LocalStorage中使用令牌登录的用户保护/dashboard

我想到的最简单的方法是创建一个/middleware/auth.js

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

并将其注册在/dashboard/index.vue组件中

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

但这种方式不起作用，我无法在中间件中获得本地存储

window is not defined

有人帮忙吗？

注意：我不会在这个项目中使用Vuex。

Answer 1

我也有这个问题。我建议在localStorage上使用cookies吗？

作为SSR包装器的Nuxt首先向服务器查找它的数据，然后是客户端。由于评论者已经为您解决了问题，middleware将首先检查服务器实现，如果它正在尝试在第一页加载时进行渲染（包括手动浏览器刷新和与Nuxt / Vue路由器实例无关的锚链接）。 LocalStorage仅适用于浏览器，因此任何访问它的尝试都必须在客户端上。如果您将令牌数据存储为cookie，Nuxt服务器将能够访问它，因为通过HTTP请求协议，您的cookie将在每个页面请求上发送。

利用Nuxt store是使用actions hook nuxtServerInit（https://nuxtjs.org/guide/vuex-store#the-nuxtserverinit-action）进行基本cookie分辨率的第一步。这将为您提供第一次为您的商店应用服务器端状态（特别是访问令牌状态）Nuxt将自动为客户端商店预设的状态。

我使用universal-cookies包，但它足够简单，可以创建自己的条件方法来检测和解析服务器接收或客户端存储的cookie。

store/index.js

import Cookies from 'universal-cookies'

export const state = () = ({
  token: null
})

export const actions = {
  nuxtServerInit ({ commit }, { req }) {
    const cookies = new Cookies(req.headers.cookie)
    const token = cookies.get('token')
    commit('SET_TOKEN', token);
  }
}

export const mutations = {
  SET_TOKEN: (state, token) => {
    state.token = token
  }
}

export const getters = {
  token: state => state.token
}

现在，无论是从服务器还是客户端读取，您的中间件都可以访问商店的令牌状态。这可以通过Nuxt context对象始终作为中间件方法的第一个参数提供。 context还包含一个方便，通用的redirect方法，您需要利用它。

middleware/auth.js

export default function ({ store, redirect }) {
  if (!store.getters['token']) {
    redirect('/login')
  }
}

这在技术上并不能解决你使用localStorage的问题，但是我希望你和其他任何人都能找到，鉴于Nuxt的服务器端优先方法，cookie是处理授权/认证请求的更友好的解决方案。