How do I make the parameters in the user auth be dynamic? - vue.js

Question

My auth in nuxt.config.js like this :
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'
}
}
In endpoint user, I put number, name and birthDate statically. How do I make it dynamic? So the parameter is taken from the data
data () {
return {
auth: {
name: '',
number: '',
birthday: null
}
}
}
When submit login, it will call this :
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')
})
}
}
Update (Using 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

Since you are setting the user endpoint in nuxt.config.js you won't be able to dynamically pass in the endpoint URL. However, you can achieve the outcome by passing false to the user endpoint like so:
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'
}
}
Then you can use axios to make the request to get the user details manually passing in your dynamic values and then setting the user values for the auth module. For example perhaps when the user logs in, you can then have a method called fetchUserInfo and it would look like so:
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)
}
}
}
Here is a link to the setUser method usage. Perhaps this would help you: https://auth.nuxtjs.org/api/auth.html#setuser-user