Nuxt Auth 模块 - 如何通过 id/username 获取用户

Jer*_*Men 3 javascript authentication vue.js vuex nuxt.js

我正在尝试将“Nuxt 身份验证模块”集成到我的 Nuxt 应用程序中。

https://auth.nuxtjs.org/

我已经配置了我的代理和身份验证模块并设置了“本地策略”。

https://auth.nuxtjs.org/schemes/local.html

我的“登录”端点工作正常,我将“propertyName”设置为“access_token”,因为这是我的令牌值所在的位置。我看到 'Vuex' 将我的 'LoggedIn' 状态更新为 true,我还可以在 Chrome 的“网络”选项卡中看到令牌响应。

但是,我真的很难理解“用户”端点的工作原理。

给出的例子:

auth: {
  strategies: {
    local: {
      endpoints: {
        login: { url: '/api/auth/login', method: 'post', propertyName: 'token' },
        logout: { url: '/api/auth/logout', method: 'post' },
        user: { url: '/api/auth/user', method: 'get', propertyName: 'user' }
      },
      tokenRequired: true,
      tokenType: 'bearer'
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

以上与我的几乎相同,“用户”端点如何知道哪个用户已登录?

我正在使用第三方系统进行身份验证,因为我正在将应用程序集成到第三方系统中。他们用于 REST 的“用户”端点需要“ID”或“用户名”才能返回有关特定用户的详细信息。

我的“登录”响应包含“用户名”,我可以用它来调用后续的用户端点(如果我知道的话)。

有谁知道 User 端点是如何工作的?基本上我需要这样调用:

          user: {
            url: '/users/${userId}',
            method: 'get',
            propertyName: 'data'
          }
Run Code Online (Sandbox Code Playgroud)

Sel*_*lim 5

也面临这个问题。

我的解决方案:

  1. 将身份验证端点的用户属性设置为 false
auth: { 
    strategies: {
      local: {
        endpoints: {
          // login api
          login: {  
            url: '/api/v1/users/login',
            method: 'post',
            propertyName: 'token'
          },
          // logout api
          logout: {
            url: '/api/v1/users/logout',
            method: 'post'
          },
          user: false // setting user fetch api to false
        },
        redirect: {
          login: '/login',
          logout: '/login',
          callback: '/login',
          home: '/'
        },
      }
    }
  },

Run Code Online (Sandbox Code Playgroud)
  1. 之后loginWith()您可以使用函数setUniversal(key, value, isJson)来保存获取的用户并使用函数获取它getUniversal(key)
  async login(user) {
    await this.$auth.loginWith('local', {
      data: user
    }).then(res => {

      let user = res.data.data.user // getting user (yours can be different)
      this.$auth.$storage.setUniversal('user', user, true) // setting user in Vuex, cookies and localstorage

      user = this.$auth.$storage.getUniversal('user') // getting user (you can use it anywhere in your app)
      console.log(user) // checking user

      this.$router.push('/') // redirecting after login
    }).catch(err => {
      console.log(err.response)
    })
  }
Run Code Online (Sandbox Code Playgroud)
  1. 就是这样,您在vuexcookieslocalstorage 中拥有您的用户,您可以像这样获取它:computed
computed: {
  user() {
    return this.$auth.$storage.getUniversal('user');
  }
}
Run Code Online (Sandbox Code Playgroud)

PS:注销,使用logout()函数,并在回调中使用this.$auth.$storage.removeUniversal('user')任何地方删除它