Форма входа в Vue — для нескольких пользователей

#javascript #vue.js #vue-component #codepen

#javascript #vue.js #vue-компонент #codepen

Вопрос:

Я создал форму входа с Vue.js . Я новичок в Vue.js фреймворк и хочу написать тест. Как я могу привлечь больше пользователей? Я могу войти только с одним созданным пользователем с

 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

Ответ №1:

Во-первых, это совсем не то, как формы входа должны создаваться в реальном мире. Вам нужно шифрование, и вам нужно хранить учетные данные извне в базе данных.

Однако это нормально, когда вы просто используете это, чтобы поиграть с VueJS

Во-вторых, в настоящее время вы сохраняете все в виде строк в отдельных переменных. Если вы хотите иметь возможность хранить несколько учетных данных, я бы сохранил объект, который сопоставляет имя пользователя с паролем

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

затем вы можете проверить правильность учетных данных в поле ввода, используя что-то вроде:

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