vue.js - 如何使用户身份验证中的参数是动态的？

Question

我在 nuxt.config.js 中的身份验证如下:

auth: {
    redirect: {
      login: '/',
      home: '/home',
      logout: '/'
    },
    strategies: {
      local: {
        endpoints: {
          login: {
            url: '/api/token',
            method: 'post',
            propertyName: 'response.token'
          },
          user: {
            url: '/api/references?number=1122334433221&name=chelsea&birthDate=1995-03-18',
            method: 'get',
            propertyName: 'data'
          },
          logout: {
            url: '/api/logout',
            method: 'post'
          }
        },
        tokenRequired: true,
        tokenType: 'Bearer '
      }
    },
    token: {
      name: 'token'
    },
    cookie: {
      name: 'token'
    }
}

在端点用户中，我静态输入了数字、姓名和出生日期。如何让它动态化？所以参数取自数据

data () {
    return {
      auth: {
        name: '',
        number: '',
        birthday: null
      }
    }
}

提交登录时，它将调用:

methods: {
    submit () {
        this.$auth.loginWith('local', {
          data: {
            username: 'mycompany',
            password: '123123123'
          }
        }).then((resp) => {
          this.SET_IS_AUTH(true)
          this.$router.push('/home')
        }).catch(() => {
          console.log('error')
        })
    }
}

更新 (使用 try catch )

methods: {
    ...mapMutations(['SET_IS_AUTH']),
    async fetchUserInfo () {
      const user = await this.$axios.$get(`/api/references?number=${this.auth.number}&name=${this.auth.name}&birthDate=${this.auth.birthday}`)
      this.$auth.setUser(user)
    },
    submit () {
      if (this.$refs.form.validate()) {
        try {
          this.$auth.loginWith('local', {
            data: {
              username: process.env.USERNAME,
              password: process.env.PASSWORD
            }
          }).then((resp) => {
            this.fetchUserInfo()
            this.SET_IS_AUTH(true)
            this.$router.push('/home')
          })
        } catch(err) {
          commit('SET_ERROR', err)
        }
      }
    }
}

Answer 1

由于您在 nuxt.config.js 中设置用户端点您将无法动态传递端点 URL。但是，您可以通过将 false 传递给用户端点来实现结果，如下所示:

auth: {
    redirect: {
      login: '/',
      home: '/home',
      logout: '/'
    },
    strategies: {
      local: {
        endpoints: {
          login: {
            url: '/api/token',
            method: 'post',
            propertyName: 'response.token'
          },
          user: false,
          logout: {
            url: '/api/logout',
            method: 'post'
          }
        },
        tokenRequired: true,
        tokenType: 'Bearer '
      }
    },
    token: {
      name: 'token'
    },
    cookie: {
      name: 'token'
    }
}

然后你可以使用 axios请求获取用户详细信息，手动传入动态值，然后为 auth 设置用户值模块。例如，当用户登录时，您可以使用一个名为 fetchUserInfo 的方法。它看起来像这样:

export default {
data () {
    return {
      auth: {
        name: '',
        number: '',
        birthday: null
      }
    }
},
methods: {
 async fetchUserInfo() {
    const user = await this.$axios.$get(`/api/references?number=${this.auth.number}&name=${this.auth.name}&birthDate=${this.auth.birthDate}`)
    // Sets the user info using the setUser method on the auth module
    this.$auth.setUser(user)
  }
}

}

这是 setUser 的链接方法使用。也许这会对您有所帮助: https://auth.nuxtjs.org/api/auth.html#setuser-user