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

【问题标题】：How to implement Auth0 server-side with Nuxtjs?如何使用 Nuxtjs 实现 Auth0 服务器端？
【发布时间】：2019-11-23 11:56:11
【问题描述】：

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

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

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

我现在的问题是：
我该怎么做才能将检查也添加到服务器端？（或者至少确保之前没有闪烁受保护的页面被重定向）。

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

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

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

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

【问题讨论】：

标签： authentication nuxt.js auth0 server-side-rendering

【解决方案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 是内置的，我在文档中的某个地方读过它

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

您也可以尝试使用 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 是我读到的另一个内置 ..somewhere..

您还可以使用$auth.loggedIn 调用$auth.user，以检查user 是否存在于登录$auth.user && $auth.loggedIn 之上。

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

我知道asyncData()首先被调用并登录我的服务器，然后data()也在服务器控制台中记录值（false，null），但在我的勇敢控制台中它们是@987654344 @，我想要一个答案，哈哈

我一直在努力让 Auth0 以我想要的方式使用 JWTs，但随着我不断爬取，我发现了一些有用的部分（即使在旧的演示中，例如你提到过，lock 的东西什么都没有……）。同样就express 和我的API 而言...无论如何，希望这对（某人）有所帮助。

【讨论】：