<template>
|
<div class="login flex-column flex-justify-center flex-align-center m0 b0">
|
<a-image
|
style="width: 17vw; height: 10vw; margin-bottom: 50px"
|
:src="djiLogo"
|
/>
|
<p class="logo fz35 pb50">Pilot Cloud API Demo</p>
|
<a-form
|
layout="inline"
|
:model="formState"
|
class="flex-row flex-justify-center flex-align-center"
|
>
|
<a-form-item>
|
<a-input v-model:value="formState.username" placeholder="Username">
|
<template #prefix
|
><UserOutlined style="color: rgba(0, 0, 0, 0.25)"
|
/></template>
|
</a-input>
|
</a-form-item>
|
<a-form-item>
|
<a-input
|
v-model:value="formState.password"
|
type="password"
|
placeholder="Password"
|
>
|
<template #prefix
|
><LockOutlined style="color: rgba(0, 0, 0, 0.25)"
|
/></template>
|
</a-input>
|
</a-form-item>
|
<a-form-item>
|
<a-button
|
class="m0"
|
type="primary"
|
html-type="submit"
|
:disabled="formState.user === '' || formState.password === ''"
|
@click="onSubmit"
|
>
|
Login
|
</a-button>
|
</a-form-item>
|
</a-form>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { message } from 'ant-design-vue'
|
import { onMounted, reactive, ref, UnwrapRef } from 'vue'
|
import { CURRENT_CONFIG } from '/@/api/http/config'
|
import { login, LoginBody, refreshToken } from '/@/api/manage'
|
import apiPilot from '/@/api/pilot-bridge'
|
import { getRoot } from '/@/root'
|
import router from '/@/router'
|
import { EComponentName, ELocalStorageKey, ERouterName, EUserType } from '/@/types'
|
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
|
import djiLogo from '/@/assets/icons/dji_logo.png'
|
import { useMyStore } from '/@/store'
|
const root = getRoot()
|
|
const store = useMyStore()
|
// const formState: UnwrapRef<LoginBody> = reactive({
|
// username: 'pilot',
|
// password: 'pilot123',
|
// flag: EUserType.Pilot,
|
// })
|
const formState: UnwrapRef<LoginBody> = reactive({
|
// 租户ID
|
tenantId: '000000',
|
// 部门ID
|
deptId: '',
|
// 角色ID
|
roleId: '',
|
// 用户名
|
username: '',
|
// 密码
|
password: '',
|
// 账号类型
|
type: 'account',
|
// 验证码的值
|
code: '',
|
// 验证码的索引
|
key: '',
|
// 预加载白色背景
|
image: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
|
flag: EUserType.Web,
|
})
|
const isVerified = ref<boolean>(false)
|
onMounted(async () => {
|
verifyLicense()
|
if (!isVerified.value) {
|
return
|
}
|
|
apiPilot.setPlatformMessage('Cloud Api Platform', '', '')
|
|
const token = localStorage.getItem(ELocalStorageKey.Token)
|
if (token) {
|
await refreshToken({})
|
.then(res => {
|
console.log('e:' + CURRENT_CONFIG.baseURL)
|
apiPilot.setComponentParam(EComponentName.Api, {
|
host: CURRENT_CONFIG.baseURL,
|
token: res.data.access_token
|
})
|
const jsres = apiPilot.loadComponent(EComponentName.Api, apiPilot.getComponentParam(EComponentName.Api))
|
if (!jsres) {
|
message.error('加载api模块失败')
|
return
|
}
|
apiPilot.setToken(res.data.access_token)
|
localStorage.setItem(ELocalStorageKey.Token, res.data.access_token)
|
root.$router.push(ERouterName.PILOT_HOME)
|
})
|
.catch(err => {
|
message.error(err)
|
})
|
}
|
})
|
const onSubmit = async (e: any) => {
|
try {
|
// 调用登录方法
|
const loginResponse = await store.dispatch('LoginByUsername', formState)
|
|
if (loginResponse) {
|
// 调用 refreshToken 方法获取 access_token
|
const refreshTokenResponse = await refreshToken({})
|
console.log(refreshTokenResponse)
|
if (refreshTokenResponse && refreshTokenResponse.data.access_token) {
|
const accessToken = refreshTokenResponse.data.access_token
|
|
console.log('Current Base URL:', CURRENT_CONFIG.baseURL)
|
console.log('Current Base URL:', accessToken)
|
// 配置 API 组件参数
|
apiPilot.setComponentParam(EComponentName.Api, {
|
host: CURRENT_CONFIG.baseURL,
|
token: accessToken,
|
})
|
|
// 加载 API 组件
|
const jsres = apiPilot.loadComponent(
|
EComponentName.Api,
|
apiPilot.getComponentParam(EComponentName.Api)
|
)
|
|
if (!jsres) {
|
message.error('加载 API 模块失败')
|
return
|
}
|
|
// 设置 token
|
apiPilot.setToken(accessToken)
|
|
// 存储 token 到 localStorage
|
localStorage.setItem(ELocalStorageKey.Token, accessToken)
|
localStorage.setItem(ELocalStorageKey.WorkspaceId, refreshTokenResponse.data.workspace_id)
|
localStorage.setItem(ELocalStorageKey.Username, refreshTokenResponse.data.username)
|
localStorage.setItem(ELocalStorageKey.UserId, refreshTokenResponse.data.user_id)
|
localStorage.setItem(ELocalStorageKey.Flag, EUserType.Web.toString())
|
|
// 跳转到首页
|
root.$router.push(ERouterName.PILOT_HOME)
|
} else {
|
throw new Error('Failed to retrieve access token from refreshToken method')
|
}
|
}
|
} catch (err) {
|
// 错误处理
|
console.error(err)
|
message.error(err.message || 'An error occurred during login')
|
}
|
}
|
|
// const onSubmit = async () => {
|
// await login(formState)
|
// .then(res => {
|
// if (!isVerified.value) {
|
// message.error('请先核实许可证.')
|
// return
|
// }
|
// console.log('login res:', res)
|
// if (res.code === 0) {
|
// apiPilot.setComponentParam(EComponentName.Api, {
|
// host: CURRENT_CONFIG.baseURL,
|
// token: res.data.access_token
|
// })
|
// const jsres = apiPilot.loadComponent(
|
// EComponentName.Api,
|
// apiPilot.getComponentParam(EComponentName.Api)
|
// )
|
// store
|
// .dispatch('LoginByUsername', formState)
|
// .then((res) => {
|
// root.$router.push(ERouterName.PILOT_HOME)
|
// })
|
// .catch(() => {
|
// })
|
// const password = encrypt(formState.password)
|
// const result = await login(formState)
|
// if (result.code === 0) {
|
// localStorage.setItem(ELocalStorageKey.Token, result.data.access_token)
|
// localStorage.setItem(ELocalStorageKey.WorkspaceId, result.data.workspace_id)
|
// localStorage.setItem(ELocalStorageKey.Username, result.data.username)
|
// localStorage.setItem(ELocalStorageKey.UserId, result.data.user_id)
|
// localStorage.setItem(ELocalStorageKey.Flag, EUserType.Web.toString())
|
// root.$router.push(ERouterName.PROJECT_LIST)
|
// } else {
|
// message.error(result.message)
|
// }
|
// }
|
function verifyLicense () {
|
isVerified.value = apiPilot.platformVerifyLicense(CURRENT_CONFIG.appId, CURRENT_CONFIG.appKey, CURRENT_CONFIG.appLicense) &&
|
apiPilot.isPlatformVerifySuccess()
|
if (isVerified.value) {
|
message.success('license验证成功')
|
} else {
|
message.error('申请license验证。请检查license是否正确，或者重新申请')
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '/@/styles/index.scss';
|
.login {
|
// background-color: $dark-highlight;
|
height: 100vh;
|
}
|
.logo {
|
color: $primary;
|
}
|
</style>
|
