完善SSO单点登录

src/views/Login/components/SSOLogin.vue

@@ -1,6 +1,7 @@
 <template>
   <!-- 表单 -->
-  <div class="form-cont">
+  <div v-show="getShow" class="form-cont">
+    <!--    <LoginFormTitle style="width: 100%" />-->
     <el-tabs class="form" style="float: none" value="uname">
       <el-tab-pane :label="'三方授权（' + client.name + ')'" name="uname" />
     </el-tabs>
@@ -12,8 +13,8 @@
           <el-checkbox-group v-model="loginForm.scopes">
             <el-checkbox
               v-for="scope in params.scopes"
-              :label="scope"
               :key="scope"
+              :label="scope"
               style="display: block; margin-bottom: -10px"
               >{{ formatScope(scope) }}
             </el-checkbox>
@@ -24,8 +25,8 @@
           <el-button
             :loading="loading"
             size="small"
-            type="primary"
             style="width: 60%"
+            type="primary"
             @click.prevent="handleAuthorize(true)"
           >
             <span v-if="!loading">同意授权</span>
@@ -40,19 +41,15 @@
   </div>
 </template>
 <script lang="ts" name="SSOLogin" setup>
-import { authorize, getAuthorize } from '@/api/login'
+// import LoginFormTitle from './LoginFormTitle.vue' // TODO 艿艿你看看要不要这个表头
+import { authorize, getAuthorize, paramsType, scopesType } from '@/api/login'
+import { LoginStateEnum, useLoginState } from './useLogin'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
 
 const { t } = useI18n()
 const ssoForm = ref() // 表单Ref
-
-type scopesType = string[]
-interface paramsType {
-  responseType: string
-  clientId: string
-  redirectUri: string
-  state: string
-  scopes: scopesType
-}
+const { getLoginState, setLoginState } = useLoginState()
+const getShow = computed(() => unref(getLoginState) === LoginStateEnum.SSO)
 const loginForm = reactive<{ scopes: scopesType }>({
   scopes: [] // 已选中的 scope 数组
 })
@@ -116,6 +113,7 @@ const doAuthorize = (autoApprove, checkedScopes, uncheckedScopes) => {
 const formatScope = (scope) => {
   // 格式化 scope 授权范围，方便用户理解。
   // 这里仅仅是一个 demo，可以考虑录入到字典数据中，例如说字典类型 "system_oauth2_scope"，它的每个 scope 都是一条字典数据。
+  // TODO 这个之做了中文部分
   return t(`login.sso.${scope}`)
 }
 const route = useRoute()
@@ -146,7 +144,6 @@ const init = () => {
 
   // 获取授权页的基本信息
   getAuthorize(params.clientId).then((res) => {
-    console.log(res)
     client.value = res.client
     // 解析 scope
     let scopes
@@ -173,5 +170,18 @@ const init = () => {
     }
   })
 }
+// =======SSO======
+const { currentRoute } = useRouter()
+// 监听当前路由
+watch(
+  () => currentRoute.value,
+  (route: RouteLocationNormalizedLoaded) => {
+    if (route.name === 'SSOLogin') {
+      setLoginState(LoginStateEnum.SSO)
+      init()
+    }
+  },
+  { immediate: true }
+)
 init()
 </script>