Vue 登錄表單 - 多用戶

Question

我用 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!')
      }
    }
  }
  
})

代碼筆

Answer 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!');
      }
    }
  }