Login.vue 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <template>
  2. <div class="container">
  3. <div class="row justify-content-center">
  4. <div class="col-md-8">
  5. <div class="card card-default">
  6. <div class="card-header">Login</div>
  7. <div class="card-body">
  8. <form method="POST" action="/login">
  9. <div class="form-group row">
  10. <label for="username" class="col-sm-4 col-form-label text-md-right">Username</label>
  11. <div class="col-md-6">
  12. <input id="username" type="username" class="form-control" v-model="username" required autofocus>
  13. </div>
  14. </div>
  15. <div class="form-group row">
  16. <label for="password" class="col-md-4 col-form-label text-md-right">Password</label>
  17. <div class="col-md-6">
  18. <input id="password" type="password" class="form-control" v-model="password" required>
  19. </div>
  20. </div>
  21. <div class="form-group row mb-0">
  22. <div class="col-md-8 offset-md-4">
  23. <button type="submit" class="btn btn-primary" @click="handleSubmit">
  24. Login
  25. </button>
  26. </div>
  27. </div>
  28. </form>
  29. </div>
  30. </div>
  31. </div>
  32. </div>
  33. </div>
  34. </template>
  35. <script>
  36. export default {
  37. data(){
  38. return {
  39. username : "",
  40. password : ""
  41. }
  42. },
  43. methods : {
  44. handleSubmit(e){
  45. e.preventDefault()
  46. if (this.password.length > 0) {
  47. axios.post('api/login', {
  48. username: this.username,
  49. password: this.password
  50. })
  51. .then(response => {
  52. localStorage.setItem('user',response.data.success.username)
  53. localStorage.setItem('jwt',response.data.success.token)
  54. if (localStorage.getItem('jwt') != null){
  55. this.$router.go('/dashboard')
  56. }
  57. })
  58. .catch(function (error) {
  59. console.error(error);
  60. });
  61. }
  62. }
  63. },
  64. beforeRouteEnter (to, from, next) {
  65. if (localStorage.getItem('jwt')) {
  66. return next('dashboard');
  67. }
  68. next();
  69. }
  70. }
  71. </script>