I am facing difficulties when trying to create users by sending data from Vue.js to the Django REST Framework. I’ve developed a custom user model based on AbstractBaseUser
and executed successful migrations, allowing it to connect with MySQL, as well as Vue.js. The python manage.py createsuperuser
command is functioning properly. When this command is executed, the password
field is automatically stored as a hashed string in the database. However, when utilizing the POST
request from Vue.js to create a user, the password is stored in its raw (non-hashed) form, failing to adhere to my Django setup which should have is_admin = False
and is_active = True
by default. The boolean fields are getting set to ‘False’ regardless of my configuration with the Vue axios method. Below is an example of my user model from ./Users/models.py
and my user manager as well as the relevant Vue.js sign-up code using axios, demonstrating the attempt to create a new user.
To ensure passwords are hashed when creating users through a Vue.js app connecting to Django REST API with a custom user model based on AbstractBaseUser
, you should handle the password hashing on the server-side. When a password is received in its raw form via a POST request, Django should hash it before saving it to the database. Here's how you can achieve that:
Django Setup
First, in your custom user model, you should override the create_user
method in your user manager to make sure the password is hashed. Below is a snippet to guide you through this process:
from django.contrib.auth.models import BaseUserManager
class CustomUserManager(BaseUserManager):
def create_user(self, email, password=None, **extra_fields):
if not email:
raise ValueError('The Email field must be set')
email = self.normalize_email(email)
user = self.model(email=email, **extra_fields)
user.set_password(password)
user.save(using=self._db)
return user
def create_superuser(self, email, password=None, **extra_fields):
extra_fields.setdefault('is_admin', True)
extra_fields.setdefault('is_active', True)
return self.create_user(email, password, **extra_fields)
The key part is the set_password()
method, which hashes the password before storing it in the database.
Vue.js Configuration
On the Vue.js side, ensure that you are sending the necessary data fields in the correct format. Here's an example of how you might be using axios to create a user:
import axios from 'axios';
export default {
methods: {
signUp(userDetails) {
axios.post('your-api-endpoint', {
email: userDetails.email,
password: userDetails.password,
// send any other necessary fields
})
.then(response => {
console.log('User successfully created', response.data);
})
.catch(error => {
console.error('There was an error!', error);
});
}
}
}
Ensure that the field names in your POST request match those expected by your Django API.
Boolean Fields Default
To enforce boolean defaults such as is_active
and is_admin
on your Django model, ensure they are properly set in your model definition and handler methods:
class User(AbstractBaseUser):
# other fields
is_active = models.BooleanField(default=True)
is_admin = models.BooleanField(default=False)
objects = CustomUserManager()
With these configurations, your Django API should correctly hash the password and handle boolean defaults as intended.