添加项目之间跳转,无需重复登录

This commit is contained in:
junleea 2025-06-03 18:07:11 +08:00
parent 8eb0daa25a
commit d1ea903c7b
7 changed files with 240 additions and 1 deletions

View File

@ -135,6 +135,23 @@ export const SearchUserService = (Data) => {
})
}
export const getUserTokenCode = (Data) => {
return request.get('/user/get_token_code', {
headers: {
'Authorization': `Bearer ${Data.token}`, // 使用 Bearer 认证方式
}
})
}
export const getTokenByCode = (Data) => {
let url = '/user/get_token_by_code' + "?code=" + Data.code
return request.get(url, {
headers: {
'Authorization': `Bearer ${Data.token}`, // 使用 Bearer 认证方式
}
})
}
export const getQRService = (qrData) => {
const params = new URLSearchParams();

View File

@ -14,6 +14,9 @@ import Group from "@/views/Group.vue"
import File from "@/views/FileList.vue"
import Shell from "@/views/ShellList.vue"
import callback from "@/views/callback.vue";
import projectSelect from "@/views/project-select.vue";
const routes = [
{
path: '/login',
@ -80,6 +83,16 @@ const routes = [
name:"shell",
component:Shell
},
{
path: '/callback',
name: 'callback',
component: callback
},
{
path: '/projectSelect',
name: 'projectSelect',
component: projectSelect
},
{
path: '/',
redirect: '/login'

View File

@ -30,6 +30,7 @@ request.interceptors.request.use(
request.interceptors.response.use(
result => {
if(result.status !== 200) {
ElMessage.error('请求失败,请稍后重试!');
router.push("/login");
}

View File

@ -52,6 +52,12 @@
@click.prevent="handleMenuSelect('/group')"
>群组</el-button
>
<el-button
type="primary"
size="mini"
@click.prevent="handleMenuSelect('/projectSelect')"
>项目选择</el-button
>
<el-button
type="primary"
size="mini"

View File

@ -441,11 +441,11 @@ export default {
//
//
async mounted() {
let now = new Date();
if (localStorage.getItem("token") === null) {
router.push("/login");
}
await this.getMyUserInfo(localStorage.getItem("userId"));
this.search_id = Cookies.get("search_id")?Cookies.get("search_id"):2002;
this.keyword = Cookies.get("keyword")?Cookies.get("keyword"):"";
},

76
src/views/callback.vue Normal file
View File

@ -0,0 +1,76 @@
<template>
<div>
<p>回调页面加载授权信息中...</p>
</div>
</template>
<script lang="ts" setup>
//query
import { useRouter, useRoute } from 'vue-router';
import { onMounted } from 'vue';
import { getTokenByCode } from '@/api/user.js';
import { GetUserInfoService } from "@/api/user.js";
import { ElMessage } from 'element-plus';
const route = useRoute();
const router = useRouter();
interface UserToken {
access_token: string; // 访
refresh_token: string; //
user_id: number; // ID
username: string; //
email: string; //
}
onMounted(async () => {
// query
const queryParams = route.query;
console.log('Received query parameters:', queryParams);
let code = queryParams.code;
//alert('Received code: ' + code);
if (code) {
let req = {
code: code,
};
await getTokenByCode(req).then(async (res: any) => {
if (res.code === 0) {
ElMessage.success('获取Token成功');
let userTokenInfo: UserToken = res.data;
localStorage.setItem("token", userTokenInfo.access_token);
localStorage.setItem("refresh_token", userTokenInfo.refresh_token);
localStorage.setItem("userId", userTokenInfo.user_id.toString());
localStorage.setItem("username", userTokenInfo.username);
await getMyUserInfo(userTokenInfo.user_id);
} else {
console.error('获取Token失败:', res.message);
ElMessage.error('获取Token失败: ' + res.message);
}
}).catch((error: any) => {
console.error('请求错误:', error);
});
}
});
const getMyUserInfo = async (id) => {
let result = {};
try {
let tokenData = {
token: localStorage.getItem("token"),
id: id,
};
result = await GetUserInfoService(tokenData);
//alert("get_user_info:" + JSON.stringify(result));
if (result['code'] === 0) {
//console.log("token data:",this.tokenData)
localStorage.setItem("video_func", result['data']['VideoFunc']);
localStorage.setItem("device_func", result['data']['DeviceFunc']);
localStorage.setItem("cid_func", result['data']['CIDFunc']);
localStorage.setItem("role", result['data']['Role']);
router.push("/user");
}
} catch (e) {
console.log(e);
}
};
</script>

View File

@ -0,0 +1,126 @@
<template>
<div class="project-container">
<h1 class="title">选择要跳转项目</h1>
<div class="project-list">
<el-card
v-for="project in projects"
:key="project.id"
class="project-card"
@click="handleSelect(project)"
>
<div class="card-content">
<el-avatar :size="60" :src="project.avatar" />
<div class="project-info">
<h3>{{ project.name }}</h3>
<p class="description">{{ project.description }}</p>
</div>
</div>
</el-card>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {getUserTokenCode} from '@/api/user'
import { ElMessage } from 'element-plus'
interface Project {
id: string
name: string
description: string
avatar: string
path: string
}
const router = useRouter()
//
const projects = ref<Project[]>([
{
id: '1',
name: 'SAW系统',
description: '毕业设计及相关项目',
avatar: 'https://www.ljsea.top/wp-content/uploads/2025/06/ljsea.jpg',
path: 'https://sv.ljsea.top/#/callback' //path: 'https://gs.ljsea.top/callback'
},
])
const GetTokenCode =async () => {
let req ={
token: localStorage.getItem('token') || ''
}
await getUserTokenCode(req).then((res: any) => {
if (res.code === 0) {
if (res.data.code === '') {
ElMessage.error('获取失败');
return;
}
alert('获取成功:'+res.data.code);
localStorage.setItem('tokenCode', res.data.code);
} else {
console.error('获取Token失败:', res.message);
}
}).catch((error: any) => {
console.error('请求错误:', error);
});
}
const handleSelect = async (project: Project) => {
await GetTokenCode();
let url = project.path + '?code=' + localStorage.getItem('tokenCode');
window.open(url);
}
</script>
<style scoped>
.project-container {
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
.title {
text-align: center;
margin-bottom: 30px;
color: #333;
}
.project-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.project-card {
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s;
}
.project-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.card-content {
display: flex;
align-items: center;
padding: 15px;
}
.project-info {
margin-left: 15px;
}
.project-info h3 {
margin: 0 0 8px 0;
color: #333;
}
.description {
margin: 0;
color: #666;
font-size: 14px;
}
</style>