Question

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

/home

/dashboard

/login

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

我想到的最简单的方法是创建一个/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上使用Cookie吗？

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

利用Nuxt store是通过使用actions钩子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的服务器端优先方法，cookies是处理授权/身份验证请求的更友好的解决方案。 / p>

Answer 2

让我们看看这个 - https://nuxtjs.org/docs/2.x/components-glossary/pages-middleware/

export default function ({ store, redirect }) {
    // If the user is not authenticated
    if (!store.state.auth.loggedIn) {
    return redirect('/login')
    }
}

简单高效=)

保护NuxtJS中的路由

2 个答案: