如何在 nuxt.js 内容文档主题中添加身份验证

Question

我创建了一个 NUXT.JS 内容静态网站，提供 .md 文件。现在我想向它添加身份验证。我想从我的主要网站重定向用户，该网站内置于 VUE.JS

用户必须登录到我的主站点，然后单击 link -> 将用户重定向到 nuxt 站点

这是我的 nuxt 配置：

import theme from '@nuxt/content-theme-docs'

export default theme({
docs: {
primaryColor: '#E24F55'
},
content: {
liveEdit: false
},
buildModules: [
'@nuxtjs/color-mode'
],
colorMode: {
preference: '', // default value of $colorMode.preference
fallback: 'light', // fallback value if not system preference found
hid: 'nuxt-color-mode-script',
globalName: '__NUXT_COLOR_MODE__',
componentName: 'ColorScheme',
classPrefix: '',
classSuffix: '-mode',
storageKey: 'nuxt-color-mode'
},
})

-------->>>>>>>>

    In middleware>stats.js
    
    export default function ({ route, redirect }) {
    console.log('route', route)
    // api call to check further
   }




nuxt.config.js
   import theme from '@nuxt/content-theme-docs'

export default theme({
  docs: {
    primaryColor: '#E24F55'
  },
  modules: ['@nuxtjs/axios'],
  
  router: {
    middleware: 'stats'
  }
})

Answer 1

这是一个 local/jwt 如何在 @nuxt/docs 主题中使用 nuxt-auth 的例子。

文件结构：

├───components
│   └───global
         auth.vue
├───content
│   └───en
         playground.md
├───node_modules
├───nuxt.config
├───package.json
├───static

// nuxt.config.js

import theme from "@nuxt/content-theme-docs";

export default theme({
  docs: {
    primaryColor: "#E24F55",
  },

  content: {
    liveEdit: false,
  },

  buildModules: ["@nuxtjs/color-mode"],

  colorMode: {
    preference: "", // default value of $colorMode.preference
    fallback: "light", // fallback value if not system preference found
    hid: "nuxt-color-mode-script",
    globalName: "__NUXT_COLOR_MODE__",
    componentName: "ColorScheme",
    classPrefix: "",
    classSuffix: "-mode",
    storageKey: "nuxt-color-mode",
  },

  // ---->
  auth: {
    strategies: {
      local: {
        token: {
          property: "token",
          // required: true,
          // type: 'Bearer'
        },
        user: {
          property: "user",
          // autoFetch: true
        },
        endpoints: {
          login: { url: "/api/auth/login", method: "post" },
          logout: { url: "/api/auth/logout", method: "post" },
          user: { url: "/api/auth/user", method: "get" },
        },
      },
    },
  },
  // <----
});

// components/global/auth.vue
<template>
  <div>
    <form @submit.prevent="userLogin">
      <div>
        <label>Username</label>
        <input type="text" v-model="login.username" />
      </div>
      <div>
        <label>Password</label>
        <input type="text" v-model="login.password" />
      </div>
      <div>
        <button type="submit">Submit</button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      login: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    async userLogin() {
      try {
        let response = await this.$auth.loginWith('local', { data: this.login })
        console.log(response)
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

并在您的 *.md 文件中使用 auth 组件：

---
title: Playground
description: ''
position: 1
category: Playground
---

<auth></auth>

这个例子很简单。它只是为了展示如何在 nuxt 文档主题中使用 nuxt auth。

Answer 2

我花了一些时间编辑如何去做。不幸的是，我无法对 Auth0 进行正确编辑和注释的屏幕截图（我当前的设置太麻烦了，无法进行清理）但这是我的 github 存储库，其中包含有关如何进行这项工作的所有解释。

https://github.com/kissu/so-nuxt-docs-theme-auth-auth0

Answer 3

哦，好的，你是对的，他不能注册中间件。但是你可以用 beforeEach.

创建一个插件

// plugins/guard.js

export default ({ app }) => {
    app.router.beforeEach((to,from, next) => {
        console.log(to, from)
        next()
    })
}

// nuxt.config.js

// ...

plugins: [__dirname + '/plugins/guard.js'],

// ...

如何在 nuxt.js 内容文档主题中添加身份验证

how to add authentication in nuxt.js content docs theme

javascript

vue.js

server-side-rendering

nuxt.js