vue.js - 如何在 Nuxt Auth 中检索令牌属性

Question

我正在使用以下技术开发我的第一个 NuxtJs 应用程序。

• 对于后端 API Laravel 7.3 (Passport)
• Nuxt v2.15.2
• 渲染模式：通用（SSR / SSG）
• NuxtAxios v5.13.1
• NuxtAuth v5

我的登录 API 响应如下：

{
    "status": true,
    "code": 200,
    "data": [
        {
            "id": 3,
            "nick_name": "johndoe",
            "full_name": "John Doe",
            "email": "[e-mail]",
            "access_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIxIiwianRpIjoiNWE5MjFmMGMyMDBlZjkxYWQxY2QyNGI3NDEyYmI1OWY4ZGEyZjg2Yzc0Y2M1ZDAwOTRhOWIyZTU4MGY3MmZmODRmNGI5N2QwYjJmYjA5NjMiLCJpYXQiOjE2MTQwMzE1MDMsIm5iZiI6MTYxNDAzMTUwMywiZXhwIjoxNjQ1NTY3NTAzLCJzdWIiOiIzIiwic2NvcGVzIjpbXX0.clQslt3CdTLoVDHzQFwQyrRLjzjTOSeipCyQAl07gzmwXFKr542hR3MUCRr8CTjueWDTNbwd-iKkQztvB7Z-0N1zaptq67UEwj3iPEEtnbV2gMOSlVdAUu0q4OPJKYI9RwJKHnK-q1bTCOUOitfLrnYOq3Lb1T8B-3en5_S7xb9ln-iOtwVc3vW1OnEbEIsn3ELeTro1zQ9IKdlHhQ50CnGU45LipzKeadtVGkm9qm467XOqlVPZdulMJTCkvunETo23hQsTsn_Fxy0IYLUA0v-_C-ARB0N672fAuHF2a8MIYHv066Omm-6WsPrCNtfOkoIgyuMLl0gaua04IJfHrDbh7CJSEUqootKTsIVvFG4OjqR3yDN2PdhjJkPYWNTMeLbKV3ewSsjCS1aMOtXYvhrVFjrunn5M74pDBzn3kW9VMFIh2BbIfUDO_ziDrsn7KAVyOm-p7gdBN_gVKcl_Hx9x4EagixWRL7GGUqEZ2AbxRkpIO4HKwqMm7WxKatSt5hkmPZ6Zt-jfMTfrj7KuF6WhhjCh1TOFJSy9BTqp9_a2eKP-YL2M6JIJXFDHwovToC96JBptbumPvB2i2KDU_XoXF2WFx_I4iNJpZVFN0u12MeyMbXlnpf4X2t79_I7QklxSfZ5LgsOdsnt9dAm9QBbSvf8AdZZNOS4p59DuQls",
        }
    ],
    "error": null,
    "errors": null
}

nuxt.config.js

auth: {
    strategies: {
      local: {
        token: {
          // property: 'access_token'
          // property: 'data[0].access_token'
          // property: 'data.data[0].access_token'
          property: false
        },
        user: {
          property: 'data',
          autoFetch: true
        },
        endpoints: {
          login: { url: '/en/signin', method: 'post' },
          logout: { url: '/user/logout', method: 'get' },
          user: { url: '/en/user/profile', method: 'get' },
        }
      }
    }
  },

登录.vue

export default {
  data() {
      return {
        login: {
          email: '[e-mail]',
          password: 'welcome'
        }
      }
    },
    methods: {
      async userLogin() {
        try {
          let response = await this.$auth.loginWith('local', { data: this.login })
          console.log(response)
        } catch (err) {
          console.log(err)
        }
      }
    }
}

当我设置时local.property: false，auth._token.local 被设置为完整的 json 对象而不是“access_token”，然后第二次点击进入 '/en/user/profile' 并带有未经身份验证的请求结果。

标签： vue.jsauthenticationnuxt.js

Answer 1

我认为另一种方法是设置 local.token.required:false ，然后在登录尝试成功后设置用户令牌。像这样的东西：

nuxt.config.js

auth: {
    strategies: {
      local: {
        token: {
          required: false
        },
        user: {
          property: 'data',
          autoFetch: true
        },
        endpoints: {
          login: { url: '/en/signin', method: 'post' },
          logout: { url: '/user/logout', method: 'get' },
          user: { url: '/en/user/profile', method: 'get' },
        }
      }
    }
  },

登录.vue

     methods: {
              async userLogin() {
                try {
                  let response = await this.$auth.loginWith('local', { data: this.login })
                  .then((response)=>{
  this.$auth.setUserToken(response.data[0].access_token,'refreshToken');
                  });
                  console.log(response);
                } catch (err) {
                  console.log(err)
                }
              }
            }