登录界面添加记住用户名功能

src/assets/js/stopExecutionOnTimeout.js

@@ -1 +0,0 @@
-"use strict";"object"!=typeof window.CP&&(window.CP={}),window.CP.PenTimer={programNoLongerBeingMonitored:!1,timeOfFirstCallToShouldStopLoop:0,_loopExits:{},_loopTimers:{},START_MONITORING_AFTER:2e3,STOP_ALL_MONITORING_TIMEOUT:5e3,MAX_TIME_IN_LOOP_WO_EXIT:2200,exitedLoop:function(o){this._loopExits[o]=!0},shouldStopLoop:function(o){if(this.programKilledSoStopMonitoring)return!0;if(this.programNoLongerBeingMonitored)return!1;if(this._loopExits[o])return!1;var t=this._getTime();if(0===this.timeOfFirstCallToShouldStopLoop)return this.timeOfFirstCallToShouldStopLoop=t,!1;var i=t-this.timeOfFirstCallToShouldStopLoop;if(i<this.START_MONITORING_AFTER)return!1;if(i>this.STOP_ALL_MONITORING_TIMEOUT)return this.programNoLongerBeingMonitored=!0,!1;try{this._checkOnInfiniteLoop(o,t)}catch(n){return this._sendErrorMessageToEditor(),this.programKilledSoStopMonitoring=!0,!0}return!1},_sendErrorMessageToEditor:function(){try{if(this._shouldPostMessage()){var o={action:"infinite-loop",line:this._findAroundLineNumber()};parent.postMessage(JSON.stringify(o),"*")}else this._throwAnErrorToStopPen()}catch(t){this._throwAnErrorToStopPen()}},_shouldPostMessage:function(){return document.location.href.match(/boomerang/)},_throwAnErrorToStopPen:function(){throw"We found an infinite loop in your Pen. We've stopped the Pen from running. Please correct it or contact support@codepen.io."},_findAroundLineNumber:function(){var o=new Error,t=0;if(o.stack){var i=o.stack.match(/boomerang\S+:(\d+):\d+/);i&&(t=i[1])}return t},_checkOnInfiniteLoop:function(o,t){if(!this._loopTimers[o])return this._loopTimers[o]=t,!1;var i=t-this._loopTimers[o];if(i>this.MAX_TIME_IN_LOOP_WO_EXIT)throw"Infinite Loop found on loop: "+o},_getTime:function(){return+new Date}},window.CP.shouldStopExecution=function(o){return window.CP.PenTimer.shouldStopLoop(o)},window.CP.exitedLoop=function(o){window.CP.PenTimer.exitedLoop(o)};

src/components/ShowFile/ShowFile.vue

@@ -2,7 +2,7 @@
   <div class="dashboard-container" v-resize="containerResize">
     <el-breadcrumb class="app-breadcrumb" separator="">
       <transition-group name="breadcrumb" v-if="showNavigation">
-        <el-breadcrumb-item v-for="(item,index) in pathList" :key="index">
+        <el-breadcrumb-item v-for="(item,index) in pathList" :key="item.folder+index">
           <el-tooltip v-if="index===0 && pathList.length > 1" class="item" effect="dark" content="返回上一级" placement="top">
             <a @click.prevent="lastLink()"><svg-icon icon-class="back" style="font-size: 24px;"/>&nbsp;</a>
           </el-tooltip>

src/store/modules/user.js

@@ -1,5 +1,5 @@
 import { login, logout, getInfo } from '@/api/user'
-import { getToken, setToken, getConsumerId, setConsumerId, removeToken, removeConsumerId } from '@/utils/auth'
+import { getToken, setToken, getConsumerId, setConsumerId, removeToken, removeConsumerId , setRememberName, removeRememberName } from '@/utils/auth'
 import { resetRouter } from '@/router'
 
 const getDefaultState = () => {
@@ -34,7 +34,7 @@ const mutations = {
 const actions = {
   // user login
   login({ commit }, userInfo) {
-    const { username, password } = userInfo
+    const { username, password, rememberMe } = userInfo
     return new Promise((resolve, reject) => {
       login({ username: username.trim(), password: password }).then(response => {
         const { data } = response
@@ -42,6 +42,11 @@ const actions = {
         setToken(data.token)
         commit('SET_USERID', data.userId)
         setConsumerId(data.userId)
+        if(rememberMe){
+          setRememberName(username)
+        } else {
+          removeRememberName()
+        }
         resolve()
       }).catch(error => {
         reject(error)

src/utils/auth.js

@@ -2,6 +2,19 @@ import Cookies from 'js-cookie'
 
 const TokenKey = 'jmal_token'
 const consumerId = 'consumerId'
+const rememberName = 'rememberName'
+
+export function getRememberName() {
+  return Cookies.get(rememberName)
+}
+
+export function setRememberName(username) {
+  return Cookies.set(rememberName, username)
+}
+
+export function removeRememberName() {
+  return Cookies.remove(rememberName)
+}
 
 export function getToken() {
   return Cookies.get(TokenKey)

src/views/login/index.vue

@@ -52,6 +52,11 @@
         </span>
         </el-form-item>
 
+        <el-form-item class="remember">
+          <!--<el-switch v-model="loginForm.rememberMe"></el-switch>-->
+          <el-checkbox label="记住我" v-model="loginForm.rememberMe"></el-checkbox>
+        </el-form-item>
+
         <el-form-item v-if="initialize" prop="confirmPassword">
         <span class="svg-container">
           <svg-icon icon-class="password" />
@@ -86,11 +91,8 @@
 </template>
 
 <script>
-// import { validUsername } from '@/utils/validate'
-import $ from 'jquery'
-require('@/assets/js/prefixfree.min.js')
-require('@/assets/js/stopExecutionOnTimeout.js')
-import {hasUser,initialization} from '@/api/user'
+import { hasUser, initialization } from '@/api/user'
+import { getRememberName } from '@/utils/auth'
 
 export default {
   name: 'Login',
@@ -122,6 +124,7 @@ export default {
       loginForm: {
         username: '',
         password: '',
+        rememberMe: false,
         confirmPassword: ''
       },
       loginRules: {
@@ -156,27 +159,11 @@ export default {
       }
     })
 
-    var stars = 800;
-    var $stars = $('.stars');
-    var r = 800;
-    for (var i = 0; i < stars; i++) {
-      if (window.CP.shouldStopExecution(1)) {
-        break;
-      }
-      var $star = $('<div/>').addClass('star');
-      $stars.append($star);
+    let rememberName = getRememberName()
+    if(rememberName){
+      this.loginForm.username = rememberName
+      this.loginForm.rememberMe = true
     }
-    window.CP.exitedLoop(1);
-    $('.star').each(function () {
-      var cur = $(this);
-      var s = 0.2 + Math.random() * 1;
-      var curR = r + Math.random() * 300;
-      cur.css({
-        transformOrigin: '0 0 ' + curR + 'px',
-        transform: ' translate3d(0,0,-' + curR + 'px) rotateY(' + Math.random() * 360 + 'deg) rotateX(' + Math.random() * -50 + 'deg) scale(' + s + ',' + s + ')'
-      });
-    });
-
   },
   methods: {
     showPwd() {
@@ -284,6 +271,12 @@ $cursor: #409eff;
     }
   }
 
+  .remember {
+    border: unset!important;
+    text-align: start;
+    margin-top: 22px;
+    margin-bottom: -20px;
+  }
   .el-form-item {
     border: 1px solid #d9d9d9;
     border-radius: 5px;