To handle authentication in your Nuxt app with Strapi, you can:
await this.$strapi.login({ identifier: '', password: '' })
await this.$strapi.register({ email: '', username: '', password: '' })
await this.$strapi.logout()
await this.$strapi.forgotPassword({ email: '' })
await this.$strapi.resetPassword({ code: this.$route.query.code, password: '', passwordConfirmation: '' })
Once logged in, you can access your user
everywhere:
<template>
<div>
<p v-if="$strapi.user">
Logged in
</p>
</div>
</template>
<script>
export default {
middleware: 'auth',
computed: {
user () {
return this.$strapi.user
}
},
methods: {
logout () {
this.$strapi.logout()
this.$router.push('/')
}
}
}
</script>
You can for example use a Nuxt middleware to protect pages when the user is not logged in:
export default function ({ redirect, $strapi }) {
if (!$strapi.user) {
return redirect('/login')
}
}
See all the available methods
You can access the default Strapi CRUD operations by using these methods:
find
count
findOne
create
update
delete
await this.$strapi.find('products')
See more in $strapi methods
You can also define your Strapi entities to add shortcuts to the previous methods, see options.
await this.$strapi.$products.find()
If you defined custom routes in your Strapi API that goes out of the REST scope, this module exposes $http
:
this.results = await this.$strapi.$http.$get('/products/search', { searchParams: { _q: 't-shirt' } })
You often need to update your user, and so on define a custom route in Strapi: PUT /users/me
.
You can use this module to call it this way:
const user = await this.$strapi.$users.update('me', form)
And then mutate the user
:
this.$strapi.user = user