byte-sailing-main/src/views/login.vue

<template>
	<div>
		全局登录页面 账号 <input type="text" /> 密码
		<input type="text" />   验证码  <input type="text" v-model="loginForm.code" /><img :src="image" alt="" />
		<button @click="login">登录</button>
	</div>
</template>
<script>
import axios from 'axios';
import md5 from 'js-md5';
import { getAll,setToken } from '@/libs/micros'
import { Alert } from 'element-ui';
export default {
	data() {
		return {
			loginForm: {
				//租户ID
				tenantId: '000000',
				//部门ID
				deptId: '',
				//角色ID
				roleId: '',
				//用户名
				username: 'admin',
				//密码
				password: 'admin',
				//账号类型
				type: 'account',
				//验证码的值
				code: '',
				//验证码的索引
				key: '',
                grant_type: 'captcha',
                scope: 'all'
				//预加载白色背景
				
			},
            image: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
		}
	},
	methods: {
		login() {
			const v = this
			console.log(md5(v.loginForm.password))
			v.loginForm.password = md5(v.loginForm.password)
			axios({
				method:"post",
				url:'/api/blade-auth/oauth/token',
				params:this.loginForm,
				headers:{
					'Captcha-Key':this.loginForm.key,
					'Captcha-Code':this.loginForm.code,
					'Tenant-Id': this.loginForm.tenantId
				},
			}).then(res=>{
				console.log(res)
				if(res.status == 200 && res.data){
					setToken(res.data)
					alert('登录成功')
					setTimeout(()=>{
						v.$router.push("/main")
					},1000)
				}
				// window.localStorage.setItem("token",JSON.stringify(res.data))
                // v.$router.push("/emailHome")
			})
			
		},
		getCodeImg() {
			this.$get('/api/blade-auth/oauth/captcha').then((res) => {
                const data = res
                this.loginForm.key = data.key
                this.image = data.image
            })
		},
	},
	created() {
		this.getCodeImg()
	},
}
</script>