In this part, we will create the <script> section of the single file component. Follow these instructions to create the component correctly:
- In the src/views folder, create a new file called Login.vue and open it.
- Create a data property, containing username, password, and error:
data: () => ({
username: '',
password: '',
error: false,
}),
- Then create the methods property with a method called userSignIn. This method will validate if the username and password data are complete. If it is, it will create a new key called 'auth' in sessionStorage, with encrypted stringified JSON of the username data. Then, set error to false and execute $router.replace to redirect the user to the user list '/user'. If any of the fields do not pass in any of the validations, the method will define the error as true and return false:
methods: {
userSignIn() {
if (this.username && this.password) {
...