vue记住账号密码登录

安装

//安装
npm install --save js-base64
//引入
const Base64 = require("js-base64").Base64

<template>
	
		<el-row class="login-container">
		       
		        <el-col :lg="8" :md="12" class="right">
				
		            <el-form ref="formRef" :rules="rules" :model="form" style="width: 250px;" size="mini">
		                <el-form-item prop="username">
		                    <el-input v-model.trim="form.username" placeholder="请输入用户名" maxlength="9" autocomplete="off" auto-complete="new-password" >
		                        <template #prefix>
		                            
									<i class="el-icon-user"></i>
		                        </template>
		                    </el-input>
		                </el-form-item>
		                <el-form-item prop="password">
		                    <el-input type="password" v-model.trim="form.password" placeholder="请输入密码"  autocomplete="off" auto-complete="new-password" >
		                        <template #prefix>
		                           
									<i class="el-icon-lock"></i>
		                        </template>
		                    </el-input>
		                </el-form-item>
						<el-form-item>
						    <!-- `checked` 为 true 或 false -->
							<div >
								<el-checkbox v-model="checked" style="color: #fff;">记住账号</el-checkbox>
								<el-checkbox v-model="checked" style="color: #fff;">记住密码</el-checkbox>
							</div>
						    
						</el-form-item>
		                <el-form-item>
		                    <el-button round color="#626aef" style="width: 250px;" type="primary" @click="onSubmit('formRef')" :loading="loading">登 录</el-button>
		                </el-form-item>
		            </el-form>
		        </el-col>
		    </el-row>
	
	
</template>

<script>
	const Base64 = require('js-base64').Base64

	export default {
	    data() {
	      return {
			  loading:false,
			  checked:false,
	        form: {
	          password: '',
	          username:'',
			},
	        rules: {
	          username: [
	            { required: true, message: '请输入工号', trigger: 'blur' },
	           
	          ],
	         password: [
	           { required: true, message: '请输入密码', trigger: 'blur' },
	    
	         ],
	        },
		
	      };
	    },
		mounted () {
	          let username = localStorage.getItem('username')
				if (username) {
				   this.form.username = localStorage.getItem('username')
				   this.form.password = Base64.decode(localStorage.getItem('password'))// base64解密
				   this.checked = true
				}
		  },
	
	    methods: {
		
	      onSubmit(formName) {
			  
	        this.$refs[formName].validate((valid) => {
				if(!valid) return
				
				/* ------ 账号密码的存储 ------ */
			if (this.checked) {
					 let password = Base64.encode(this.form.password) // base64加密
					 localStorage.setItem('username', this.form.username)
					 localStorage.setItem('password', password)
				  } else {
					 localStorage.removeItem('username')
					 localStorage.removeItem('password')
				  }
				this.loading=true
				 //调用vuex里的方法
				       this.$store.dispatch('login',this.form).then(res=>{
				          //提示成功
				          //this.$message.success('登录成功')
				          //跳转到后台首页
				          this.$router.push('/')
						  setTimeout(()=>{
							  location.reload()
						  },100)
						  
				        }).finally(()=>{
				               this.loading=false
							   
				         }) 
				
	
	        });
	      },

	    }
	  }
</script>