Browse Source

feat: 添加门户登录功能,支持通过门户id进行用户注册和信息更新

201250038 1 year ago
parent
commit
7bdf80a47d
4 changed files with 44 additions and 41 deletions
  1. 8 0
      src/apis/auth.ts
  2. 22 0
      src/router/index.ts
  3. 13 19
      src/views/LoginPage/LoginPage.vue
  4. 1 22
      src/views/LoginPage/index.scss

+ 8 - 0
src/apis/auth.ts

@@ -16,6 +16,14 @@ const authApis = {
         })
     },
 
+    getUserByToken: (token: String) => {
+        return axiosInstance.get(`${AUTH_PREFIX}/loginByPortal`, {
+            params: {
+                'id_token': token
+            }
+        })
+    }
+
 }
 
 export default authApis

+ 22 - 0
src/router/index.ts

@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import {useStore} from "@/store";
+import authApis from "@/apis/auth";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -162,6 +163,27 @@ const router = createRouter({
  */
 router.beforeEach((to) => {
   const store = useStore()
+
+  // 判断是否从门户跳转过来,如果是则直接登录
+  if(to.path === '/login'){
+    if(to.query.id_token != null){
+      authApis.getUserByToken(to.query.id_token.toString())
+      .then((_res:any) => {
+        const data = _res.data.data
+        if (_res.data.code === 200) {
+          store.setUser(data);
+          store.setToken(data?.token)
+          localStorage.setItem('Authorization', data?.token);
+          localStorage.setItem('User', JSON.stringify(data));
+          console.log("登陆成功", data)
+          router.push('/home') 
+        } 
+      }).catch((_err:any) => {
+        console.log("登陆失败", _err)
+      })
+    }
+  }
+  
   // 判断是否是登录页面,如果是则直接放行
   if (to.path === '/login' || to.path === '/register' || to.path === '/passwordChange'|| to.path === '/admin/login') {
     return true;

+ 13 - 19
src/views/LoginPage/LoginPage.vue

@@ -6,6 +6,7 @@
 <!-- 学生:181250126 xiaosuniubi
 教师:181250127 xiaosuniubi -->
 
+<!-- 接入门户 -->
 <template>
   <div class="login-container">
     <div class="container-box">
@@ -16,19 +17,8 @@
       </div>
       <div class="login-box">
         <div class="box-content">
-          <div class="box-tabs">
-            <div
-              :class="{ 'box-tabs-item': true, 'active': isOfficialNumber }"
-              @click="isOfficialNumber = true">
-              账号密码
-            </div>
-            <div
-              :class="{ 'box-tabs-item': true, 'active': !isOfficialNumber }"
-              @click="isOfficialNumber = false">
-              邮箱验证码
-            </div>
-          </div>
-          <Login :isCode="!isOfficialNumber"/>
+          <!-- <div>正在跳转SEECODER门户,如未响应请手动点击登录按钮</div> -->
+          <el-button type="primary" size="large" round style="width: 100%;" @click="login">登录</el-button>
         </div>
       </div>
     </div>
@@ -36,12 +26,16 @@
 </template>
 
 <script lang="ts" setup>
-  import "./index.scss"
-  import Login from "@/views/LoginPage/component/Login.vue";
-  import {ref} from 'vue'
-  
-  let isOfficialNumber = ref(true)
-  
+import "./index.scss"
+import { ElButton } from 'element-plus'
+
+const VUE_APP_PORTAL_HOST = 'p-nju.seec.seecoder.cn'
+
+const login = async () => {
+  window.location = `http://${VUE_APP_PORTAL_HOST}/interaction?scope=openid&client_id=seec-seec&redirect_uri=${encodeURI(`http://${window.location.host}/`)
+    }` as unknown as Location;
+}
+
 </script>
 
 <script lang="ts">

+ 1 - 22
src/views/LoginPage/index.scss

@@ -65,28 +65,7 @@
         min-height: 350px;
         display: flex;
         flex-direction: column;
-
-        .box-tabs {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          border-bottom: solid 1px var(--boder-color);
-
-          .box-tabs-item {
-            width: 50%;
-            text-align: center;
-            padding: 10px 0;
-            cursor: pointer;
-
-            &.active {
-              color: var(--main-color)
-            }
-
-            &:nth-child(1) {
-              border-right: solid 1px var(--boder-color);
-            }
-          }
-        }
+        padding: 10px;
       }
       .vessel-title {
         margin-bottom: 20px;