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

Question

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

我正在尝试将身份验证服务转换为 Auth0。我正在关注 Vue quickstart ，但我发现 auth0-js是一个客户端库，因为它使用了很多在 Nuxt 的服务器端不可用的“窗口”内容。

但是，我通过使其成为客户端插件并将所有功能(即在生命周期 Hook 中调用 authservice)包装在 process.client 中来使其工作。查看。它的工作原理是“有点”，因为当在未登录的情况下进入 protected 页面时，它会在重定向到登录页面之前闪烁页面(因为它也在服务器端呈现，但只有在它交付后才会进行检查我想是客户端)。

我现在的问题是:我该怎么做才能将支票也添加到服务器端？ (或者至少确保 protected 页面在被重定向之前没有闪烁)。

到目前为止我已经尝试过:

将有效负载和登录状态保存在商店中并 checkin 一些自定义中间件，但这并没有奏效。

另外，在我看来@nuxt/auth 已经过时了， nuxt auth0 example也是。当我使用新的 auth0 通用时，它使用 auth0-lock。

有人对如何解决这个问题有建议吗？提前致谢!

Answer 1

不确定这是否会有所帮助，并且只回答了几个问题(很久以前的其他帐户)。

更新 ..我读了我的答案，然后是问题标题(我认为我的答案确实涵盖了您的一些上下文)，但是关于标题，您也可以使用 auth 查看作为 plugin .然后，您可以在页面被点击之前处理那里的东西。

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

如果您不使用 Vuex ，我强烈推荐它。 Nuxt Vuex Store Guide

// 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是内置的，我在文档中读到了..somewhere..

这将解决无闪存问题，您还可以利用加载程序屏幕和 asyncData 检查 state在渲染 View 之前避免闪烁并在它挂起时填充数据。

您也可以尝试使用 Vuex 行动 ，我目前正在玩这两个在我现在的过程中。了解 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是我读过的另一个内置的..somewhere..

您也可以调用 $auth.user与 $auth.loggedIn检查是否 user存在于登录 $auth.user && $auth.loggedIn 之上.

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

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

我一直在努力尝试获取 Auth0使用 以我想要的方式工作智威汤逊 ，但是随着我不断的爬行，我发现了一些有用的东西(即使在旧的演示中，比如你提到的那个，只是没有 lock 的东西......)。同样是 express和我的 API 一般来说......无论如何，希望这对(某人)有所帮助。