v1.5 正式版发布 ，详情查看发行版说明

src/views/login/index.vue

@@ -12,27 +12,29 @@
           <svg-icon slot="prefix" icon-class="password" class="el-input__icon" style="height: 39px;width: 13px;margin-left: 2px;" />
         </el-input>
       </el-form-item>
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 35px 0px;">记住密码</el-checkbox>
+      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
       <el-form-item style="width:100%;">
         <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
           <span v-if="!loading">登 录</span>
           <span v-else>登 录 中...</span>
         </el-button>
       </el-form-item>
+      <p class="login-tip">系统默认用户名：admin，密码：123456</p>
     </el-form>
   </div>
 </template>
 
 <script>
 import { md5 } from '@/utils/md5'
+import Cookies from 'js-cookie'
 export default {
   name: 'Login',
   data() {
     return {
-      checked: false,
+      md5Pwd: '',
       loginForm: {
-        username: 'admin',
-        password: '123456',
+        username: '',
+        password: '',
         rememberMe: false
       },
       loginRules: {
@@ -40,7 +42,6 @@ export default {
         password: [{ required: true, trigger: 'blur', message: '密码不能为空' }]
       },
       loading: false,
-      pwdType: 'password',
       redirect: undefined
     }
   },
@@ -52,19 +53,38 @@ export default {
       immediate: true
     }
   },
+  created() {
+    this.getCookie()
+  },
   methods: {
-    showPwd() {
-      if (this.pwdType === 'password') {
-        this.pwdType = ''
-      } else {
-        this.pwdType = 'password'
+    getCookie() {
+      const username = Cookies.get('username')
+      const password = Cookies.get('password')
+      const rememberMe = Cookies.get('rememberMe')
+      // 保存cookie里面的加密后的密码
+      this.md5Pwd = password === undefined ? '' : password
+      this.loginForm = {
+        username: username === undefined ? '' : username,
+        password: this.md5Pwd,
+        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
       }
     },
     handleLogin() {
       this.$refs.loginForm.validate(valid => {
-        const user = { username: this.loginForm.username, password: md5(this.loginForm.password), rememberMe: this.loginForm.rememberMe }
+        let pass = this.loginForm.password
+        if (pass !== this.md5Pwd) { pass = md5(pass) }
+        const user = { username: this.loginForm.username, password: pass, rememberMe: this.loginForm.rememberMe }
         if (valid) {
           this.loading = true
+          if (user.rememberMe) {
+            Cookies.set('username', user.username, { expires: 1 })
+            Cookies.set('password', user.password, { expires: 1 })
+            Cookies.set('rememberMe', user.rememberMe, { expires: 1 })
+          } else {
+            Cookies.remove('username')
+            Cookies.remove('password')
+            Cookies.remove('rememberMe')
+          }
           this.$store.dispatch('Login', user).then(() => {
             this.loading = false
             this.$router.push({ path: this.redirect || '/' })
@@ -92,7 +112,7 @@ export default {
   .title {
     margin: 0px auto 40px auto;
     text-align: center;
-    color: #555;
+    color: #707070;
   }
 
   .login-form {
@@ -107,4 +127,9 @@ export default {
       }
     }
   }
+  .login-tip {
+    font-size: 13px;
+    text-align: center;
+    color: #bfbfbf;
+  }
 </style>