login.vue 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <template>
  2. <div class="login-main">
  3. <div class="login">
  4. <h1>后台系统登陆</h1>
  5. <el-form @submit.native.prevent="login" :model="form" :rules="rules" ref="form">
  6. <el-form-item prop="username">
  7. <el-input auto-complete="off" v-model="form.username" autofocus>
  8. <template slot="prepend">用户名</template>
  9. </el-input>
  10. </el-form-item>
  11. <el-form-item prop="password">
  12. <el-input type="password" auto-complete="off" v-model="form.password">
  13. <template slot="prepend">密&nbsp;&nbsp;&nbsp;码</template>
  14. </el-input>
  15. </el-form-item>
  16. <el-form-item class="login-text">
  17. <el-switch v-model="form.keep"></el-switch> 保持登陆
  18. </el-form-item>
  19. <el-form-item>
  20. <el-button type="success" class="btn" native-type="submit">登&nbsp;&nbsp;&nbsp;&nbsp;陆</el-button>
  21. </el-form-item>
  22. </el-form>
  23. </div>
  24. </div>
  25. </template>
  26. <script>
  27. import Vue from 'vue'
  28. export default {
  29. data () {
  30. return {
  31. form: {
  32. username: '',
  33. password: '',
  34. keep: false
  35. },
  36. rules: {
  37. username: {required: true, message: '请输入用户名', trigger: 'submit'},
  38. password: {required: true, message: '请输入密码', trigger: 'submit'}
  39. }
  40. }
  41. },
  42. methods: {
  43. login () {
  44. this.$refs.form.validate(r => {
  45. if (r) {
  46. this.$http.post('login/in', this.form).then(data => {
  47. localStorage.JWT_TOKEN = data.token
  48. this.$store.commit('base/setuser', {username: data.username, name: data.name})
  49. this.$store.commit('base/setmenu', data.menu)
  50. this.$store.commit('base/setauth', data.inx_auth)
  51. this.$store.commit('base/login')
  52. this.$router.push('/')
  53. }, err => {})
  54. }
  55. })
  56. }
  57. }
  58. }
  59. </script>
  60. <style scoped>
  61. .login-main{width: 100%;height: 100%;background: #eee;}
  62. .login{position: absolute;left: 0;right: 0;top: 0;bottom: 0;display: block;width: 260px;height: 260px;margin: auto;padding: 35px;background: #fff;border-radius: 8px;box-shadow: 0 0 20px #a8a8a8;}
  63. .login h1{margin: 0;font-weight: 400;color: #555;font-size: 22px;line-height: 30px;margin-bottom: 20px;text-align: center;}
  64. .login .btn{width: 100%;}
  65. .login-text{color: #99a9bf;}
  66. </style>