From 51a9d84cd18642922c0b29480773f2899297c675 Mon Sep 17 00:00:00 2001
From: Bang <15622356989@163.com>
Date: Sun, 24 Jul 2022 17:56:43 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20iframe=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/App.vue | 1 -
src/api/index.js | 9 ++--
src/router.js | 24 +++++++++
src/shared/login.js | 119 +++++++++++++++--------------------------
src/stores/index.js | 2 +-
src/views/TheHome.vue | 22 ++------
src/views/TheLogin.vue | 105 ++++++++++++++++++++++++++++++++++++
vite.config.js | 2 +-
8 files changed, 182 insertions(+), 102 deletions(-)
create mode 100644 src/views/TheLogin.vue
diff --git a/src/App.vue b/src/App.vue
index 814bfa6..825608c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -21,7 +21,6 @@ watch(
try {
querySubdomain(
Object.assign(config, {
- userId: String(userInfoStore.id),
token: userInfoStore.token,
})
).then((data) => {
diff --git a/src/api/index.js b/src/api/index.js
index 9766264..8fc3b49 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -12,13 +12,12 @@ export function queryAppId() {
}
/**
- * 获取token及用户信息
- * @param {Object} params {id:'', federationIdentityId: ''}
+ * 获取idtoken
* @returns
*/
-export function queryAuthentication(params) {
- const url = `/api/playground/oauth2/authentication`;
- return request.post(url, params).then((res) => {
+export function queryIdToken(params) {
+ const url = `/api/playground/user/getIdToken`;
+ return request.get(url, { params }).then((res) => {
return res.data;
});
}
diff --git a/src/router.js b/src/router.js
index 0e9115f..5d86f57 100644
--- a/src/router.js
+++ b/src/router.js
@@ -1,16 +1,40 @@
import { createRouter, createWebHistory } from 'vue-router';
+import { getUserAuth, requestUserInfo } from '@/shared/login';
+import { useLoginStore } from './stores';
export const routes = [
{
path: '/',
redirect: '/home',
},
+ // 登录页
+ {
+ path: '/login',
+ name: 'login',
+ component: () => {
+ return import('@/views/TheLogin.vue');
+ },
+ },
+ // webclient
{
path: '/home',
name: 'home',
component: () => {
return import('@/views/TheHome.vue');
},
+ beforeEnter: async () => {
+ const loginStore = useLoginStore();
+ if (!loginStore.isLogined) {
+ const { token } = getUserAuth();
+ if (token) {
+ await requestUserInfo();
+ }
+ }
+ if (!loginStore.isLogined) {
+ return { name: 'login' };
+ }
+ return true;
+ },
},
];
diff --git a/src/shared/login.js b/src/shared/login.js
index 4761864..37355dd 100644
--- a/src/shared/login.js
+++ b/src/shared/login.js
@@ -1,6 +1,11 @@
import { AuthenticationClient } from 'authing-js-sdk';
import { useLoginStore, useUserInfoStore } from '@/stores';
-import { queryAppId, queryUserInfo, queryUserTokenInfo } from '@/api';
+import {
+ queryAppId,
+ queryIdToken,
+ queryUserInfo,
+ queryUserTokenInfo,
+} from '@/api';
// 登录事件
export const LOGIN_EVENTS = {
@@ -29,27 +34,25 @@ function setStatus(status) {
}
// 存储用户id及token，用于下次登录
-export function saveUserAuth(token, info) {
- if (!info && !token) {
- localStorage.removeItem(LOGIN_KEYS.USER_INFO);
+export function saveUserAuth(token) {
+ if (!token) {
localStorage.removeItem(LOGIN_KEYS.USER_TOKEN);
resetStore();
} else {
- localStorage.setItem(LOGIN_KEYS.USER_INFO, JSON.stringify(info));
localStorage.setItem(LOGIN_KEYS.USER_TOKEN, token);
}
}
-function initStore(token, id, domain) {
- if (!id && !token) {
+function initStore(token, domain) {
+ if (!token) {
resetStore();
} else {
const userInfoStore = useUserInfoStore();
- userInfoStore.id = id;
userInfoStore.token = token;
userInfoStore.domain = domain;
}
}
+
function resetStore() {
const userInfoStore = useUserInfoStore();
userInfoStore.$reset();
@@ -58,58 +61,39 @@ function resetStore() {
// 获取用户id及token
export function getUserAuth() {
let token = localStorage.getItem(LOGIN_KEYS.USER_TOKEN);
- let _info = localStorage.getItem(LOGIN_KEYS.USER_INFO);
- let userInfo;
- let id;
- try {
- userInfo = JSON.parse(_info) || {};
- } catch (error) {
- userInfo = {};
- }
- if (token === 'undefined' || _info === 'undefined') {
+
+ if (token === 'undefined') {
saveUserAuth();
token = '';
- id = 0;
- } else {
- id = parseInt(userInfo.sub);
}
return {
- userInfo,
- id,
token,
};
}
-function afterLogined(userInfo, domain) {
- if (!userInfo || !userInfo.userId) {
- return;
- }
-
- const { userId, userToken } = userInfo;
-
- if (!userId || !userToken) {
+function afterLogined(token, domain) {
+ if (!token) {
setStatus(LOGIN_STATUS.FAILED);
saveUserAuth();
return console.error('用户信息不正确！');
}
- initStore(userToken, userId, domain);
+ initStore(token, domain);
setStatus(LOGIN_STATUS.DONE);
}
// 请求用户信息
export async function requestUserInfo() {
- const { id, token } = getUserAuth();
- if (id && token) {
+ const { token } = getUserAuth();
+ if (token) {
try {
setStatus(LOGIN_STATUS.DOING);
const res = await queryUserInfo({
- userId: id,
token,
});
if (res.code === 200) {
- afterLogined(res.userInfo, res.domain);
+ afterLogined(token, res.domain);
} else {
setStatus(LOGIN_STATUS.FAILED);
saveUserAuth();
@@ -123,32 +107,26 @@ export async function requestUserInfo() {
}
}
-const redirectUri = `${location.origin}/`;
function createClient(appId, appHost) {
return new AuthenticationClient({
- appId: '621de88c40c828c2296cd1cc',
- appHost: 'https://tryme.authing.cn',
- redirectUri,
+ appId,
+ appHost,
+ redirectUri: `${window.location.href}/`,
});
}
// 开始鉴权
export async function goAuthorize() {
- queryAppId().then((res) => {
- if (res.code === 200) {
- const client = createClient(
- res.callbackInfo.appId,
- res.callbackInfo.appHost
- );
- // 构造 OIDC 授权登录 URL
- let url = client.buildAuthorizeUrl();
- // 如果需要获取 Refresh token，请在 scope 中加入 offline_access 项
- let url2 = client.buildAuthorizeUrl({
- scope: 'openid profile offline_access',
- });
- location.href = url;
- url2;
- }
- });
+ const res = await queryAppId();
+ if (res.code === 200) {
+ const client = createClient(
+ res.callbackInfo.appId,
+ res.callbackInfo.appHost
+ );
+ // 构造 OIDC 授权登录 URL
+ const url = client.buildAuthorizeUrl();
+ const userInfoStore = useUserInfoStore();
+ userInfoStore.loginUrl = url;
+ }
}
// 退出
@@ -159,12 +137,13 @@ export function logout() {
res.callbackInfo.appId,
res.callbackInfo.appHost
);
- const { userInfo } = getUserAuth();
+ const { token } = getUserAuth();
+ const idToken = queryIdToken({ token });
let logoutUrl = client1.buildLogoutUrl({
protocol: 'oidc',
expert: true,
- redirectUri,
- idToken: userInfo.idtoken,
+ redirectUri: `${location.origin}/login`,
+ idToken: idToken,
});
setStatus(LOGIN_STATUS.NOT);
saveUserAuth();
@@ -173,29 +152,19 @@ export function logout() {
});
}
-export function getCodeByUrl() {
+export async function getCodeByUrl() {
const query = getUrlParam();
if (query.code && query.state) {
const param = {
code: query.code,
state: query.state,
};
- queryUserTokenInfo(param).then((res) => {
- const {
- token = '',
- idtoken = '',
- user: { sub = '' },
- } = res;
- saveUserAuth(token, { sub, idtoken });
- // 去掉url中的code
- let newUrl = location.origin;
- if (window.history.replaceState) {
- window.history.replaceState({}, '', newUrl);
- } else {
- window.location.href = newUrl;
- }
- requestUserInfo();
- });
+ const res = await queryUserTokenInfo(param);
+ const { token = '' } = res;
+ saveUserAuth(token);
+ const newUrl = `${location.origin}/login`;
+ window.location.href = null;
+ window.parent.window.location.href = newUrl;
}
}
diff --git a/src/stores/index.js b/src/stores/index.js
index 5ef8273..96a985c 100644
--- a/src/stores/index.js
+++ b/src/stores/index.js
@@ -39,8 +39,8 @@ export const useLoginStore = defineStore('login', {
// 用户信息
export const useUserInfoStore = defineStore('user', {
- id: '',
token: '',
domain: '',
subdomain: '',
+ loginUrl: '',
});
diff --git a/src/views/TheHome.vue b/src/views/TheHome.vue
index c16378a..733d7ab 100644
--- a/src/views/TheHome.vue
+++ b/src/views/TheHome.vue
@@ -1,13 +1,6 @@
+
+
+
+
+
+
+
diff --git a/vite.config.js b/vite.config.js
index 58e6dc0..547971a 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -24,7 +24,7 @@ export default defineConfig({
port: 1234,
proxy: {
'/api': {
- target: 'https://opengaussplayground.test.osinfra.cn/',
+ target: 'https://tryme.test.osinfra.cn/',
changeOrigin: true,
},
},
--
Gitee