Vue 登录表单 - 多用户

Question

I've created a login form with Vue.js. I'm new with the Vue.js framework and want to write a test. How can I get more Users? I can only login with one created user with

username: 'tiko', password: 'miko'

el: '#app',
  
  data: {
    username: '',
    password: '',
        username2: '',
    password2: '',
    credentials: {
      username: 'tiko', password: 'miko', 
      
      
    },
     
   
    errors: {}
  },
  
  methods: {
    onSubmit() {
      if( 
        this.credentials.username !== this.username || 
        this.credentials.password !== this.password 
      ) {
        this.errors = new Error()
        this.errors.set('Invalid credentials!')
      }
      else {
        alert('Success!')
      }
    }
  }
  
})

CODEPEN

Answer 1

Fist off, this is not how login forms should be made in the real world at all. You need encryption and you need to externally store the credentials on a database.

However its fine when you are just using this to play around with VueJS

Second off, you are currently storing everything as strings in sepperate variables. If you want to be able to store multiple credentials, i would store an object that maps a username to a password

data: {
  credentials: {
    "bob": "password123"
    "hank": "dolfins123"
  }
}

then you can validate if the credentials in the input field are correct using something like:

methods: {
    onSubmit() {
      if(credentials[this.username] !== this.password) {
        this.errors = new Error();
        this.errors.set('Invalid credentials!');
      }
      else {
        alert('Success!');
      }
    }
  }