如何使用Nuxtjs在服务器端实现Auth0？

Question

我有一个Nuxt应用，其身份验证已在通用模式下运行。

我正在尝试将身份验证服务转换为Auth0。我遵循Vue快速入门，但是我发现auth0-js是一个客户端库，因为它使用了很多“窗口”的东西，而Nuxt的服务器端没有这些东西。

但是，我通过使它成为客户端插件并包装所有功能（即在生命周期挂钩中调用authservice）进行process.client检查来使其工作。之所以可以使用“某种”，是因为在未登录时进入受保护的页面时，它会在刷新页面之前将其闪烁，然后重定向到登录页面（因为它也在服务器端呈现，但是检查仅在将其交付给客户端时才进行）。我认为是客户端）。

我现在的问题是：
如何将支票也添加到服务器端？（或至少确保在重定向之前不刷新受保护的页面）。

到目前为止，我已经尝试过：

• 将有效负载和登录状态保存在存储中，并签入一些自定义中间件，但这并不能解决问题。

另外，在我看来@ nuxt / auth已经过时，或者还有nuxt auth0示例。当我使用新的auth0通用时，它使用auth0-lock。

有人对如何解决此问题有建议吗？提前致谢！

Answer 1

不确定这是否有任何帮助，并且只回答了几个问题（很久以前的其他帐户）。

更新..我阅读了我的答案，然后阅读了问题标题（我认为我的答案确实涵盖了您的一些上下文），但是关于标题，您也可以考虑使用authas a plugin。然后，您可以在页面被点击之前在那里处理一些事情。

我不确定您的代码是如何实现的，但这可能会有所帮助（希望如此）。

如果你不使用Vuex，我强烈推荐它。Nuxt Vuex 商店指南

// index/store.js
// At least have the store initialized, but its most likely going to be used..

// page.vue
<template>
...
<div v-else-if="!$auth.loggedIn">
  {{ test }}
</div>
...
...

data() {
  if (!this.$auth.loggedIn) {
    const test = 'Only this will load, no flash'
    return { test }
  }
}

$auth.loggedIn是内置的，我在文档中的某个地方读过它

这将解决无闪烁问题，您还可以利用加载器屏幕和 asyncDatastate在渲染视图之前进行检查，以避免闪烁并在挂起时填充数据。

你也可以尝试使用Vuex Actions，我目前正在使用这两个。了解nuxtServerInit()

// store/index.js
import axios from 'axios'

export const actions = {
  nuxtServerInit ({commit}, {request}) {
    // This is good if you have the user in your request or other server side stuff
    if (request.user) commit('SET_USER', request.user)
  },
  async GET_USER({ commit }, username) {
    const user = await axios.get(`/user/${username}`)
    if (user) commit('SET_USER', user)
  }
}

export const mutations = {
  SET_USER(state, user) {
    // simple set for now
    state.auth.user = user || null
  }
}

第二个是使用fetch()页面本身的方法组合的。

// page.vue
async fetch({ $auth, store }) {
  await store.dispatch('GET_USER', $auth.$state.user)
}

现在您可以$auth.user根据需要调用您的代码。

$auth.user是另一个内置的我读过..某处..

您还可以在登录后$auth.user调用 来$auth.loggedIn检查是否存在。user$auth.user && $auth.loggedIn

这可能this.$auth.<value>取决于您尝试引用它的位置。

我asyncData()首先学会了获取调用并登录我的服务器，然后data()也在服务器控制台中记录值（false，null），但在我的 Brave 控制台中undefined，我想要一个答案，哈哈

我一直在努力尝试按照Auth0自己想要的方式使用JWT进行工作，但是当我不断爬行时，我一路上发现了有用的位（即使在旧的演示中，例如您提到的演示，也没有任何东西lock......）。另外就express我的API而言......无论如何，希望这对（某人）有所帮助。