代码之家 › 专栏 › 技术社区 › Yung Silva

保护nuxtjs中的路由

nuxt.js vue.js javascript

Yung Silva · 技术社区 · 6 年前

嗯,我从nuxt开始,我有路线:

/home

/dashboard

/login

我想保护 /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。

1 回复 | 直到 6 年前

Steve Hynding 6 年前

我也有这个问题。我可以建议在本地存储上使用cookie吗?

nuxt是SSR包装器,它首先查找服务器的数据,然后查找客户机。因为评论者已经为你决定了, middleware 将首先检查服务器实现,如果并且仅当它尝试在第一页加载时呈现(包括手动浏览器刷新和与nuxt/vue路由器实例无关的锚链接)。本地存储仅对浏览器可用,因此任何访问它的尝试都必须在客户端上。如果您将令牌数据存储为cookie,则nuxt服务器将能够访问它,因为根据HTTP请求协议,您的cookie将在每个页面请求上发送。

利用Nuxt store 是通过使用 actions 钩 nuxtServerInit ( https://nuxtjs.org/guide/vuex-store#the-nuxtserverinit-action )这将给您第一次机会为您的存储应用服务器端状态(特别是访问令牌状态),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 对象始终作为中间件方法的第一个参数提供。 上下文 还包含一个方便、通用的 redirect 你需要利用的方法。

middleware/auth.js

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

从技术上讲,这并不能解决您使用LocalStorage的问题,但我希望您和其他人会发现,考虑到Nuxt的服务器端优先方法,cookie是处理授权/身份验证请求的更友好的解决方案。