src/views/Login/components/LoginForm.vue

@@ -64,14 +64,35 @@
          />
        </el-form-item>
      </el-col>
<!--      <Verify-->
<!--        ref="verify"-->
<!--        :captchaType="captchaType"-->
<!--        :imgSize="{ width: '400px', height: '200px' }"-->
<!--        mode="pop"-->
<!--        @success="handleLogin"-->
<!--      />-->
      <Verify
        ref="verify"
        :captchaType="captchaType"
        :imgSize="{ width: '400px', height: '200px' }"
        mode="pop"
        @success="handleLogin"
      />
    </el-row>

<!--    &lt;!&ndash;            统一身份登录&ndash;&gt;-->
<!--    <el-divider content-position="center">统一身份登录</el-divider>-->
<!--    <el-col :span="24" style="padding-right: 10px; padding-left: 10px">-->
<!--      <el-form-item>-->
<!--        <el-row :gutter="10" justify="space-between" style="width: 100%">-->
<!--          <el-col :span="8">-->
<!--            <el-button type="primary" style="width: 100%;"-->
<!--                       @click="ssoPasswordLogin">-->
<!--              {{ ssoLoginPasswordTitle }}-->
<!--            </el-button>-->
<!--          </el-col>-->
<!--          <el-col :span="8">-->
<!--            <el-button type="primary" style="width: 100%;"-->
<!--                       @click="ssoCodeLogin">-->
<!--              {{ ssoLoginCodeTitle }}-->
<!--            </el-button>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--      </el-form-item>-->
<!--    </el-col>-->
  </el-form>
</template>
<script lang="ts" setup>
@@ -84,6 +105,7 @@
import * as authUtil from '@/utils/auth'
import * as LoginApi from '@/api/login'
import { LoginStateEnum, useFormValid, useLoginState } from './useLogin'
// import axios from "axios";

defineOptions({ name: 'LoginForm' })

@@ -96,7 +118,10 @@
const { currentRoute, push } = useRouter()
const redirect = ref<string>('')
const loginLoading = ref(false)
// const ssoLoginPasswordTitle = ref('账号密码模式')
// const ssoLoginCodeTitle = ref('授权码模式')
const verify = ref()
const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字

const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN)

@@ -112,15 +137,35 @@
    password: import.meta.env.VITE_APP_DEFAULT_LOGIN_PASSWORD || '',
    scope: 'user.read user.write',
    grantType: 'password',
    captchaVerification: '',
    rememberMe: true // 默认记录我。如果不需要，可手动修改
  }
})

// const ssoLoginData = reactive({
//   loginParam: {
//     username: '',
//     password: '',
//     token: ''
//   }
// })
//
// const oauth2Token = reactive({
//   oauthParam: {
//     clientId: 'shasteel',
//     clientSecret: 'shasteel111111111111111',
//     grantType: 'password',
//     username: '',
//     password: '',
//     scope: ''
//   }
// })

// 获取验证码
const getCode = async () => {
  // 情况一，未开启：则直接登录
  if (loginData.captchaEnable === 'false') {
    await handleLogin()
    await handleLogin({})
  } else {
    // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
    // 弹出验证码
@@ -143,13 +188,14 @@

const loading = ref() // ElLoading.service 返回的实例
// 登录
const handleLogin = async () => {
const handleLogin = async (params) => {
  loginLoading.value = true
  try {
    const data = await validForm()
    if (!data) {
      return
    }
    loginData.loginForm.captchaVerification = params.captchaVerification
    const res = await LoginApi.login(loginData.loginForm)
    if (!res) {
      return
@@ -166,7 +212,7 @@
    }
    authUtil.setToken(res)
    if (!redirect.value) {
      redirect.value = '/'
      redirect.value = '/index'
    }
    // 判断是否为SSO登录
    if (redirect.value.indexOf('sso') !== -1) {
@@ -180,41 +226,52 @@
  }
}

// 自动登录
// const autoLogin = async (appid, username) => {
//   console.log(appid)
//   console.log(username)
//   loginLoading.value = true
//   try {
//     const res = await LoginApi.auth2Login(loginData.loginForm)
//     if (!res) {
//       return
// const ssoPasswordLogin = () => {
//   // 发起请求
//   axios({
//     url: "http://localhost:48080/admin-api/system/oauth2/token?"
//       // 客户端
//       + "client_id=" + oauth2Token.oauthParam.clientId
//       + "&client_secret=" + oauth2Token.oauthParam.clientSecret
//       // 密码模式的参数
//       + "&grant_type=" + oauth2Token.oauthParam.grantType
//       + "&username=" + loginData.loginForm.username
//       + "&password=" + loginData.loginForm.password
//       + '&scope=user.read user.write',
//     method: 'POST',
//     headers: {
//       'tenant-id': '172', // 多租户编号，写死
//     }
//     loading.value = ElLoading.service({
//       lock: true,
//       text: '正在加载系统中...',
//       background: 'rgba(0, 0, 0, 0.7)'
//     })
//     if (loginData.loginForm.rememberMe) {
//       authUtil.setLoginForm(loginData.loginForm)
//   }).then((result) => {
//     const res = result.data
//     if (res.code !== 0) {
//       alert('授权失败，原因：' + res.msg)
//       return;
//     }
//     const auth_token = res.data.access_token
//     // 设置token
//     authUtil.setToken(res.data)
//     // 提示登录成功
//     alert('授权成功！校验系统用户及权限');
//     ssoLoginData.loginParam.token = auth_token
//     if (!!redirect.value) {
//       location.href = decodeURIComponent(redirect.value);
//     } else {
//       authUtil.removeLoginForm()
//       push({ path: '/index' })
//     }
//     authUtil.setToken(res)
//     if (!redirect.value) {
//       redirect.value = '/'
//     }
//     console.log(permissionStore)
//     // 判断是否为SSO登录
//     if (redirect.value.indexOf('sso') !== -1) {
//       window.location.href = window.location.href.replace('/login?redirect=', '')
//     } else {
//       push({ path: redirect.value })
//     }
//   } finally {
//     loginLoading.value = false
//     loading.value.close()
//   }
//   }).catch((e) => {
//     ElMessage.error('授权失败：' + e.message);
//   });
// }

// const ssoCodeLogin = () => {
//   alert('暂未开通');
//   // const clientId = 'shasteel';
//   // const redirectUri = encodeURIComponent('http://127.0.0.1:9000/callback');
//   // const responseType = 'code'; // 1）授权码模式，对应 code；2）简化模式，对应 token
//   // window.location.href = 'http://localhost/sso?client_id=' + clientId
//   //   + '&redirect_uri=' + redirectUri
//   //   + '&response_type=' + responseType;
// }

watch(
@@ -228,15 +285,6 @@
)
onMounted(() => {
  getLoginFormCache()
  let params = new URLSearchParams(window.location.search);
  console.log(params)
  let appid = params.get('appid');
  let username = params.get('username');
  console.log(appid)
  console.log(username)
  // if(appid) {
  //   autoLogin(appid, username)
  // }
})
</script>