byte-sailing-storage/src/components/login-form/login-form.vue

<template>
	<Form
		ref="form"
		:model="form"
		:rules="rules"
		@keydown.enter.native="handleSubmit"
	>
		<FormItem prop="userName">
			<Input
				size="large"
				v-model="form.username"
				placeholder="请输入账号"
				prefix="ios-contact-outline"
			></Input>
		</FormItem>
		<FormItem prop="password">
			<Input
				size="large"
				type="password"
				v-model="form.password"
				placeholder="请输入密码"
				prefix="ios-lock-outline"
			></Input>
		</FormItem>
		<FormItem>
			<Input
				size="large"
				v-model="form.code"
				placeholder="请输入验证码"
				prefix="ios-contact-outline"
			></Input>
		</FormItem>
		<FormItem>
			<Checkbox v-model="remember">记住用户名</Checkbox>
			
		</FormItem>
		<img @click="getCodeImg" :src="image" alt=""></img>
		<FormItem>
			<Button size="large" @click="login" type="primary" long
				>登录</Button
			>
		</FormItem>
	</Form>
</template>
<script>
import axios from 'axios'
import md5 from 'js-md5'
export default {
	name: 'form',
	props: {
		userNameRules: {
			type: Array,
			default: () => {
				return [
					{
						required: true,
						message: '账号不能为空',
						trigger: 'blur',
					},
				]
			},
		},
		passwordRules: {
			type: Array,
			default: () => {
				return [
					{
						required: true,
						message: '密码不能为空',
						trigger: 'blur',
					},
				]
			},
		},
	},
	data() {
		return {
			remember: true,

			form: {
				//租户ID
				tenantId: '000000',
				//部门ID
				deptId: '',
				//角色ID
				roleId: '',
				//用户名
				username: 'admin',
				//密码
				password: 'admin',
				//账号类型
				type: 'account',
				//验证码的值
				code: '',
				//验证码的索引
				key: '',
				grant_type: 'captcha',
				scope: 'all',
				type:'loginWithoutVerificationCode',
				//预加载白色背景
			},
			image: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
		}
	},
	computed: {
		rules() {
			return {
				userName: this.userNameRules,
				password: this.passwordRules,
			}
		},
	},
	methods: {
		login() {
			const v = this
			console.log(md5(v.form.password))
			v.formCopy = {...v.form}
			v.formCopy.password = md5(v.formCopy.password)
			axios({
				method:"post",
				url:'/api/blade-auth/oauth/token',
				params:this.formCopy,
				headers:{
					'Captcha-Key':this.form.key,
					'Captcha-Code':this.form.code,
					'Tenant-Id': this.form.tenantId
				},
			}).then(res=>{
				console.log(res)
				if(res.status == 200 && res.data){
					window.localStorage.setItem("token",JSON.stringify(res.data))
					//v.getRouters()
					this.$router.push("/home")
				}
				// window.localStorage.setItem("token",JSON.stringify(res.data))
                // v.$router.push("/emailHome")
			})
			
		},
		getRouters(){
			
		},
		getCodeImg() {
			this.$get('/api/blade-auth/oauth/captcha').then((res) => {
                const data = res
                this.form.key = data.key
                this.image = data.image
            })
		},
		handleSubmit() {
			if (this.form.password == '123456') {
				this.$Message.info({
					content: '密码错误',
					duration: 3,
				})
				return
			}
			this.$refs.form.validate((valid) => {
				if (valid) {
					if (this.remember) {
						sessionStorage.setItem('userName', this.form.userName)
					} else {
						sessionStorage.setItem('userName', '')
					}
					this.$emit('on-success-valid', {
						userName: this.form.userName,
						password: this.form.password,
					})
				}
			})
		},
	},
	mounted() {
		let userName = sessionStorage.getItem('userName')
		userName && (this.form.userName = userName)
		this.getCodeImg()
	},
}
</script>