扫码登录调整

src/permission.ts

@@ -61,6 +61,25 @@ const whiteList = [
   '/deepoil'
 ]
 
+const loginData = reactive({
+  isShowPassword: false,
+  captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE !== 'false',
+  tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE !== 'false',
+  loginForm: {
+    tenantName: '芋道源码',
+    username: 'admin',
+    password: 'admin123',
+    captchaVerification: '',
+    rememberMe: false
+  }
+})
+//获取租户ID
+const getTenantId = async () => {
+  if (loginData.tenantEnable) {
+    const res = await LoginApi.getTenantIdByName(loginData.loginForm.tenantName)
+    authUtil.setTenantId(res)
+  }
+}
 // 路由加载前
 router.beforeEach(async (to, from, next) => {
   start()
@@ -69,6 +88,7 @@ router.beforeEach(async (to, from, next) => {
     if (to.path === '/login') {
       next({ path: '/' })
     } else {
+      debugger
       // 获取所有字典
       const dictStore = useDictStoreWithOut()
       const userStore = useUserStoreWithOut()
@@ -76,6 +96,7 @@ router.beforeEach(async (to, from, next) => {
       if (!dictStore.getIsSetDict) {
         await dictStore.setDictMap()
       }
+
       if (!userStore.getIsSetUser) {
         isRelogin.show = true
         await userStore.setUserInfoAction()
@@ -99,6 +120,8 @@ router.beforeEach(async (to, from, next) => {
     if (whiteList.indexOf(to.path) !== -1) {
       const code = to.query.code;
       if (code) {
+        debugger
+        await getTenantId()
         const res = await LoginApi.socialLogin('20', typeof code === "string" ? code :"", '22')
         authUtil.setToken(res)
         next({ path: 'index' });

src/views/Login/SocialLogin.vue

@@ -253,7 +253,7 @@ const tryLogin = async () => {
     const redirect = getUrlValue('redirect')
     const code = route?.query?.code as string
     const state = route?.query?.state as string
-
+    await getTenantId()
     const res = await LoginApi.socialLogin(type, code, state)
     authUtil.setToken(res)
 
@@ -318,6 +318,7 @@ const handleLogin = async (params) => {
 }
 
 onMounted(() => {
+  debugger
   getCookie()
   tryLogin()
 })

src/views/Login/components/LoginForm.vue

@@ -361,389 +361,3 @@ onMounted(() => {
 }
 </style>
 
-<!--<template>-->
-<!--  <el-form-->
-<!--    v-show="getShow"-->
-<!--    ref="formLogin"-->
-<!--    :model="loginData.loginForm"-->
-<!--    :rules="LoginRules"-->
-<!--    class="login-form"-->
-<!--    label-position="top"-->
-<!--    label-width="120px"-->
-<!--    size="large"-->
-<!--  >-->
-<!--    <el-row style="display: flex;justify-content: center">-->
-<!--      <el-image v-if="loginType === 'uname'" :src="imgsaoma" class="clickable-image" alt="扫码登录" title="扫码登录" @click="changeLogin('dingding')"/>-->
-<!--      <el-image v-if="loginType === 'dingding'" :src="imgreturn" class="clickable-image" alt="返回" title="返回" @click="changeLogin('uname')"/>-->
-<!--        <el-image :src="img" class=" h-100px" style="margin-top: 16%"/>-->
-<!--      <div v-if="loginType === 'uname'" style="width: 90%">-->
-<!--      <el-col :span="24" style="padding-right: 10px; padding-left: 10px; margin-top: 85px">-->
-<!--        <el-form-item prop="username" >-->
-<!--          <el-input  v-model="loginData.loginForm.username" :placeholder="t('login.usernamePlaceholder')" type="text" auto-complete="off"  :prefix-icon="iconAvatar"/>-->
-<!--        </el-form-item>-->
-<!--      </el-col>-->
-<!--      <el-col :span="24" style="padding-right: 10px; padding-left: 10px;margin-top: 15px">-->
-<!--        <el-form-item prop="password">-->
-<!--          <el-input-->
-<!--            v-model="loginData.loginForm.password"-->
-<!--            :placeholder="t('login.passwordPlaceholder')"-->
-<!--            :prefix-icon="iconLock"-->
-<!--            show-password-->
-<!--            type="password"-->
-<!--            @keyup.enter="getCode()"-->
-<!--          />-->
-<!--        </el-form-item>-->
-<!--      </el-col>-->
-<!--      <el-col-->
-<!--        :span="24"-->
-<!--        style="padding-right: 10px; padding-left: 10px; margin-top: 20px;"-->
-<!--      >-->
-<!--        <el-form-item>-->
-<!--          <el-row justify="space-between" style="width: 100%;">-->
-<!--            <el-col :span="6">-->
-<!--              <el-checkbox v-model="loginData.loginForm.rememberMe">-->
-<!--                {{ t('login.remember') }}-->
-<!--              </el-checkbox>-->
-<!--            </el-col>-->
-<!--            <el-col :offset="6" :span="12">-->
-<!--              <el-link-->
-<!--                style="float: right"-->
-<!--                type="primary"-->
-<!--                @click="setLoginState(LoginStateEnum.RESET_PASSWORD)"-->
-<!--              >-->
-<!--                {{ t('login.forgetPassword') }}-->
-<!--              </el-link>-->
-<!--            </el-col>-->
-<!--          </el-row>-->
-<!--        </el-form-item>-->
-<!--      </el-col>-->
-<!--      <el-col :span="24" style="padding-right: 10px; padding-left: 10px;margin-bottom: 10px">-->
-<!--        <el-form-item>-->
-<!--          <XButton-->
-<!--            style="height: 4em;background-color: rgb(11, 26, 50);border: none;opacity: 1;color: rgb(186, 205, 224)"-->
-<!--            :loading="loginLoading"-->
-<!--            :title="t('login.login')"-->
-<!--            class="w-[100%]"-->
-<!--            type="primary"-->
-<!--            @click="getCode()"-->
-<!--          />-->
-<!--        </el-form-item>-->
-<!--      </el-col>-->
-<!--      <Verify-->
-<!--        v-if="loginData.captchaEnable === 'true'"-->
-<!--        ref="verify"-->
-<!--        :captchaType="captchaType"-->
-<!--        :imgSize="{ width: '400px', height: '200px' }"-->
-<!--        mode="pop"-->
-<!--        @success="handleLogin"-->
-<!--      />-->
-<!--      </div>-->
-<!--      <div v-if="loginType === 'dingding'" id="login_container"  style="margin-left: 8%;margin-top: 18%">-->
-<!--      </div>-->
-<!--    </el-row>-->
-<!--  </el-form>-->
-<!--</template>-->
-<!--<script lang="ts" setup>-->
-<!--import img from '@/assets/imgs/img.png'-->
-<!--import imgsaoma from '@/assets/imgs/saoma.png'-->
-<!--import imgreturn from '@/assets/imgs/return.png'-->
-<!--import { ElLoading } from 'element-plus'-->
-<!--import type { RouteLocationNormalizedLoaded } from 'vue-router'-->
-<!--import { useIcon } from '@/hooks/web/useIcon'-->
-<!--import * as DictDataApi from '@/api/system/dict/dict.data'-->
-<!--import * as authUtil from '@/utils/auth'-->
-<!--import { usePermissionStore } from '@/store/modules/permission'-->
-<!--import * as LoginApi from '@/api/login'-->
-<!--import { LoginStateEnum, useFormValid, useLoginState } from './useLogin'-->
-
-<!--import { ref,nextTick,onMounted } from 'vue';-->
-<!--const appId = 'dingik345qmyhtysvs2x'-->
-<!--const dingRedirectUrl = 'http://1.94.244.160:91/login?loginType=dingding&type=20'-->
-
-<!--onMounted(()=>{-->
-<!--  getTenantName();-->
-<!--})-->
-<!--const getTenantName=async ()=>{-->
-<!--  const queryParams = reactive({-->
-<!--    pageNo: 1,-->
-<!--    pageSize: 10,-->
-<!--    label: '',-->
-<!--    status: undefined,-->
-<!--    dictType: 'tenant_name'-->
-<!--  })-->
-<!--  const data = await DictDataApi.getDictDataPage(queryParams)-->
-<!--  loginData.loginForm.tenantName = data.list[0].label;-->
-<!--}-->
-<!--const loginType = ref('uname');-->
-<!--const changeLogin = async (type) => {-->
-<!--  console.log(loginData.loginForm.tenantName)-->
-<!--  await getTenantId()-->
-<!--  loginType.value = type;-->
-<!--  if (type === 'dingding') {-->
-<!--    initDingLogin();-->
-<!--  }-->
-<!--};-->
-
-<!--const initDingLogin=()=> {-->
-<!--  // if (window.DDLogin) {-->
-<!--  var url = dingRedirectUrl-->
-<!--  var state = _getRandomString(10);-->
-<!--  var gotoUrl = encodeURIComponent(-->
-<!--    "https://oapi.dingtalk.com/connect/oauth2/sns_authorize?" +-->
-<!--    "appid=" + appId +-->
-<!--    "&response_type=code" +-->
-<!--    "&scope=snsapi_login" +-->
-<!--    "&state=" + state +-->
-<!--    "&redirect_uri=" + url-->
-<!--  );-->
-
-<!--  nextTick(() => {-->
-<!--    var obj = window.DDLogin({-->
-<!--      id: "login_container",-->
-<!--      goto: gotoUrl,-->
-<!--      style: "border:none;background-color:#FFFFFF;",-->
-<!--      width: '90%', // 二维码的宽度-->
-<!--      height: "290", // 二维码的高度-->
-<!--    })-->
-<!--    // 重置扫码登录框的样式，让登录框居中-->
-<!--    let box = document.getElementById('login_container')-->
-<!--    box.querySelector('iframe').style.top = '0'-->
-<!--    box.querySelector('iframe').style.bottom = '0'-->
-<!--    box.querySelector('iframe').style.left = '0'-->
-<!--    box.querySelector('iframe').style.right = '0'-->
-<!--    box.querySelector('iframe').style.margin = 'auto'-->
-<!--  })-->
-
-<!--  /* new window.DDLogin({-->
-<!--    id: "login_container",-->
-<!--    goto: gotoUrl,-->
-<!--    style: "border:none;background-color:#FFFFFF;",-->
-<!--    width: "350",-->
-<!--    height: "350",-->
-<!--  }); */-->
-<!--  var handleMessage = function (event) {-->
-<!--    var origin = event.origin;-->
-<!--    if (origin === "https://login.dingtalk.com") {-->
-<!--      var loginTmpCode = event.data;-->
-<!--      console.log(loginTmpCode)-->
-<!--      window.location.href =-->
-<!--        "https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=dingik345qmyhtysvs2x&response_type=code&scope=snsapi_login&state=" +-->
-<!--        state +-->
-<!--        "&redirect_uri=" +-->
-<!--        url +-->
-<!--        "&loginTmpCode=" +-->
-<!--        loginTmpCode;-->
-<!--    }-->
-<!--  };-->
-<!--  if (typeof window.addEventListener != "undefined") {-->
-<!--    window.addEventListener("message", handleMessage, false);-->
-<!--  } else if (typeof window.attachEvent != "undefined") {-->
-<!--    window.attachEvent("onmessage", handleMessage);-->
-<!--  }-->
-<!--  // }-->
-<!--}-->
-<!--const _getRandomString=(len)=> {-->
-<!--  len = len || 10;-->
-<!--  let $chars = "ABCDEFGHIJKMNOPQRSTUVWXYZ"; // 默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1-->
-<!--  let maxPos = $chars.length;-->
-<!--  let pwd = "";-->
-<!--  for (var i = 0; i < len; i++) {-->
-<!--    pwd += $chars.charAt(Math.floor(Math.random() * maxPos));-->
-<!--  }-->
-<!--  return pwd;-->
-<!--}-->
-<!--defineOptions({ name: 'LoginForm' })-->
-
-<!--const { t } = useI18n()-->
-<!--const message = useMessage()-->
-<!--const iconHouse = useIcon({ icon: 'ep:house' })-->
-<!--const iconAvatar = useIcon({ icon: 'ep:avatar',size:26 })-->
-<!--const iconLock = useIcon({ icon: 'ep:lock',size:26 })-->
-<!--const formLogin = ref()-->
-<!--const { validForm } = useFormValid(formLogin)-->
-<!--const { setLoginState, getLoginState } = useLoginState()-->
-<!--const { currentRoute, push } = useRouter()-->
-<!--const permissionStore = usePermissionStore()-->
-<!--const redirect = ref<string>('')-->
-<!--const loginLoading = ref(false)-->
-<!--const verify = ref()-->
-<!--const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字-->
-
-<!--const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN)-->
-
-<!--const LoginRules = {-->
-<!--  tenantName: [required],-->
-<!--  username: [required],-->
-<!--  password: [required]-->
-<!--}-->
-<!--const loginData = reactive({-->
-<!--  isShowPassword: false,-->
-<!--  captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE,-->
-<!--  tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE,-->
-<!--  loginForm: {-->
-<!--    tenantName: '瑞气能源',-->
-<!--    username: import.meta.env.VITE_APP_DEFAULT_LOGIN_USERNAME || '',-->
-<!--    password: import.meta.env.VITE_APP_DEFAULT_LOGIN_PASSWORD || '',-->
-<!--    captchaVerification: '',-->
-<!--    rememberMe: true // 默认记录我。如果不需要，可手动修改-->
-<!--  }-->
-<!--})-->
-
-<!--// const socialList = [-->
-<!--//   { icon: 'ant-design:wechat-filled', type: 30 },-->
-<!--//   { icon: 'ant-design:dingtalk-circle-filled', type: 20 },-->
-<!--//   { icon: 'ant-design:github-filled', type: 0 },-->
-<!--//   { icon: 'ant-design:alipay-circle-filled', type: 0 }-->
-<!--// ]-->
-
-<!--// 获取验证码-->
-<!--const getCode = async () => {-->
-<!--  // 情况一，未开启：则直接登录-->
-<!--  if (loginData.captchaEnable === 'false') {-->
-<!--    await handleLogin({})-->
-<!--  } else {-->
-<!--    // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录-->
-<!--    // 弹出验证码-->
-<!--    verify.value.show()-->
-<!--  }-->
-<!--}-->
-<!--// 获取租户 ID-->
-<!--const getTenantId = async () => {-->
-<!--  if (loginData.tenantEnable === 'true') {-->
-<!--    const res = await LoginApi.getTenantIdByName(loginData.loginForm.tenantName)-->
-<!--    authUtil.setTenantId(res)-->
-<!--  }-->
-<!--}-->
-<!--// 记住我-->
-<!--const getLoginFormCache = () => {-->
-<!--  const loginForm = authUtil.getLoginForm()-->
-<!--  if (loginForm) {-->
-<!--    loginData.loginForm = {-->
-<!--      ...loginData.loginForm,-->
-<!--      username: loginForm.username ? loginForm.username : loginData.loginForm.username,-->
-<!--      password: loginForm.password ? loginForm.password : loginData.loginForm.password,-->
-<!--      rememberMe: loginForm.rememberMe,-->
-<!--      tenantName: loginForm.tenantName ? loginForm.tenantName : loginData.loginForm.tenantName-->
-<!--    }-->
-<!--  }-->
-<!--}-->
-<!--// 根据域名，获得租户信息-->
-<!--const getTenantByWebsite = async () => {-->
-<!--  const website = location.host-->
-<!--  const res = await LoginApi.getTenantByWebsite(website)-->
-<!--  if (res) {-->
-<!--    loginData.loginForm.tenantName = res.name-->
-<!--    authUtil.setTenantId(res.id)-->
-<!--  }-->
-<!--}-->
-<!--const loading = ref() // ElLoading.service 返回的实例-->
-<!--// 登录-->
-<!--const handleLogin = async (params: any) => {-->
-<!--  loginLoading.value = true-->
-<!--  try {-->
-<!--    await getTenantId()-->
-<!--    const data = await validForm()-->
-<!--    if (!data) {-->
-<!--      return-->
-<!--    }-->
-<!--    const loginDataLoginForm = { ...loginData.loginForm }-->
-<!--    loginDataLoginForm.captchaVerification = params.captchaVerification-->
-<!--    const res = await LoginApi.login(loginDataLoginForm)-->
-<!--    if (!res) {-->
-<!--      return-->
-<!--    }-->
-<!--    loading.value = ElLoading.service({-->
-<!--      lock: true,-->
-<!--      text: '正在加载系统中...',-->
-<!--      background: 'rgba(0, 0, 0, 0.7)'-->
-<!--    })-->
-<!--    if (loginDataLoginForm.rememberMe) {-->
-<!--      authUtil.setLoginForm(loginDataLoginForm)-->
-<!--    } else {-->
-<!--      authUtil.removeLoginForm()-->
-<!--    }-->
-<!--    authUtil.setToken(res)-->
-<!--    if (!redirect.value) {-->
-<!--      redirect.value = '/'-->
-<!--    }-->
-<!--    // 判断是否为SSO登录-->
-<!--    if (redirect.value.indexOf('sso') !== -1) {-->
-<!--      window.location.href = window.location.href.replace('/login?redirect=', '')-->
-<!--    } else {-->
-<!--      await push({ path: redirect.value || permissionStore.addRouters[0].path })-->
-<!--    }-->
-<!--  } finally {-->
-<!--    loginLoading.value = false-->
-<!--    loading.value.close()-->
-<!--  }-->
-<!--}-->
-
-<!--// 社交登录-->
-<!--watch(-->
-<!--  () => currentRoute.value,-->
-<!--  (route: RouteLocationNormalizedLoaded) => {-->
-<!--    redirect.value = route?.query?.redirect as string-->
-<!--  },-->
-<!--  {-->
-<!--    immediate: true-->
-<!--  }-->
-<!--)-->
-<!--onMounted(() => {-->
-<!--  getLoginFormCache()-->
-<!--  getTenantByWebsite()-->
-<!--})-->
-<!--</script>-->
-
-<!--<style lang="scss" scoped>-->
-<!--::v-deep .el-input__wrapper {-->
-<!--  background-color: transparent !important;-->
-<!--  height: 3.5em;-->
-<!--  color: white;-->
-<!--  box-shadow: none !important;-->
-<!--  border-radius: 0;-->
-<!--  border: none !important;-->
-<!--  border-bottom: 1px solid #bacde0 !important;-->
-<!--  outline: none;-->
-<!--}-->
-<!--:deep(.anticon) {-->
-<!--  &:hover {-->
-<!--    color: var(&#45;&#45;el-color-primary) !important;-->
-<!--  }-->
-<!--}-->
-
-<!--.login-code {-->
-<!--  float: right;-->
-<!--  width: 100%;-->
-<!--  height: 38px;-->
-
-<!--  img {-->
-<!--    width: 100%;-->
-<!--    height: auto;-->
-<!--    max-width: 100px;-->
-<!--    vertical-align: middle;-->
-<!--    cursor: pointer;-->
-<!--  }-->
-<!--}-->
-<!--::v-deep .rqinput .el-input__inner  {-->
-<!--  background-color: transparent !important;-->
-<!--  border: none !important;-->
-<!--  border-bottom: 1px solid rgb(186, 205, 224) !important;-->
-<!--  border-radius: 0;-->
-<!--  height: 2.8em;-->
-<!--  //left: 18%;-->
-<!--  padding-left: 3em;-->
-<!--  color: white;-->
-<!--}-->
-<!--.clickable-image {-->
-<!--  cursor: pointer;-->
-<!--  position:absolute;-->
-<!--  //top: 2%;-->
-<!--  //right: 2%;-->
-<!--  width: 6%;-->
-<!--  margin-top: -9%;-->
-<!--  margin-left: 111%;-->
-<!--}-->
-<!--::v-deep .el-input__inner {-->
-<!--  color: white;-->
-<!--}-->
-<!--</style>-->