后台管理 登陆权限问题解决

frontend/src/views/login.vue

@@ -1,163 +1,136 @@
 <template>
-	<div class="login-wrap">
-		<div class="login-container">
-			<div class="ms-login">
-				<div class="ms-title">{{ settings.siteFullTitle }}</div>
-				<el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
-					<el-form-item prop="username">
-						<el-input v-model="param.username" placeholder="用户名">
-							<template #prepend>
-								<el-button :icon="User"></el-button>
-							</template>
-						</el-input>
-					</el-form-item>
-					<el-form-item prop="password">
-						<el-input type="password" placeholder="密码" v-model="param.password"
-							@keyup.enter="submitForm(login)">
-							<template #prepend>
-								<el-button :icon="Lock"></el-button>
-							</template>
-						</el-input>
-					</el-form-item>
-					<div class="login-btn">
-						<el-button type="primary" @click="submitForm(login)">
-							<!-- <el-icon><UserFilled /></el-icon>-->
-							登 录&nbsp;<el-icon>
-								<Right />
-							</el-icon>
-						</el-button>
-					</div>
-				</el-form>
-			</div>
-		</div>
-		<div class="company-info" v-if="settings.companyName">
-			{{ settings.companyName }}
-		</div>
-	</div>
+    <div class="login-wrap">
+        <div class="login-container">
+            <div class="ms-login">
+                <div class="ms-title">{{ settings.siteFullTitle }}</div>
+                <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
+                    <el-form-item prop="username">
+                        <el-input v-model="param.username" placeholder="用户名">
+                            <template #prepend>
+                                <el-button :icon="User"></el-button>
+                            </template>
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item prop="password">
+                        <el-input type="password" placeholder="密码" v-model="param.password"
+                            @keyup.enter="submitForm(login)">
+                            <template #prepend>
+                                <el-button :icon="Lock"></el-button>
+                            </template>
+                        </el-input>
+                    </el-form-item>
+                    <div class="login-btn">
+                        <el-button type="primary" @click="submitForm(login)">
+                            <!-- <el-icon><UserFilled /></el-icon>-->
+                            登 录&nbsp;<el-icon>
+                                <Right />
+                            </el-icon>
+                        </el-button>
+                    </div>
+                </el-form>
+            </div>
+        </div>
+        <div class="company-info" v-if="settings.companyName">
+            {{ settings.companyName }}
+        </div>
+    </div>
 </template>
 
 <script setup lang="ts">
 import { ref, reactive } from 'vue';
 import { useTagsStore } from '../store/tags';
-import { usePermissStore } from '../store/permiss';
 import { useRouter } from 'vue-router';
-import { ElMessage, ElLoading } from 'element-plus';
+import { ElMessage } from 'element-plus';
 import type { FormInstance, FormRules } from 'element-plus';
 import { Lock, User } from '@element-plus/icons-vue';
-import send_request from '../utils/send_request';
 import settings from '../utils/settings';
-
+import * as userApi from '../api/user';
 
 interface LoginInfo {
-	username: string;
-	password: string;
-}
-
-interface UserInfo {
-	username: string;
-	id: string;
-	roleId: string;
+    username: string;
+    password: string;
 }
 
 interface PrivilegeInfo {
-	"id": Number,
-	"roleId": Number,
-	"privilegeName": string,
-	"module": string
+    "id": Number,
+    "roleId": Number,
+    "privilegeName": string,
+    "module": string
 }
 
 interface RoleInfo {
-	id: Number,
-	roleName: string,
-	comment: any,
-	privileges: Array<PrivilegeInfo>;
+    id: Number,
+    roleName: string,
+    comment: any,
+    privileges: Array<PrivilegeInfo>;
 }
 
 const router = useRouter();
 const param = reactive<LoginInfo>({
-	username: 'admin',
-	password: '123123'
+    username: 'root',
+    password: 'root'
 });
 
 const rules: FormRules = {
-	username: [
-		{
-			required: true,
-			message: '请输入用户名',
-			trigger: 'blur'
-		}
-	],
-	password: [
-		{
-			required: true,
-			message: '请输入密码',
-			trigger: 'blur'
-		}
-	]
+    username: [
+        {
+            required: true,
+            message: '请输入用户名',
+            trigger: 'blur'
+        }
+    ],
+    password: [
+        {
+            required: true,
+            message: '请输入密码',
+            trigger: 'blur'
+        }
+    ]
 };
-const permiss: any = usePermissStore();
+
 const login = ref<FormInstance>();
 const submitForm = (formEl: FormInstance | undefined) => {
-	if (!formEl) return;
-	formEl.validate(async (valid: boolean, invalidFields: any) => {
-		if (!valid) {
-			// ElMessage.error('请填写用户名或密码');
+    if (!formEl) return;
+    formEl.validate(async (valid: boolean, invalidFields: any) => {
+        if (!valid) {
+            // ElMessage.error('请填写用户名或密码');
 
-			console.log("invalidFields", invalidFields);
-			// 对表单中的每一个不合法输入框进行遍历
-			Object.values(invalidFields).forEach((input: any) => {
-				// console.log("input", input)
-				// 对该不合法输入框的提示信息进行遍历
-				input.forEach((element: any) => {
-					// console.log("element", element)
-					ElMessage.error({ message: element.message, grouping: true });
-				});
-			});
-			return;
-		}
+            console.log("invalidFields", invalidFields);
+            // 对表单中的每一个不合法输入框进行遍历
+            Object.values(invalidFields).forEach((input: any) => {
+                // console.log("input", input)
+                // 对该不合法输入框的提示信息进行遍历
+                input.forEach((element: any) => {
+                    // console.log("element", element)
+                    ElMessage.error({ message: element.message, grouping: true });
+                });
+            });
+            return;
+        }
 
-		const loading = ElLoading.service({
-			lock: true,
-			text: '请稍候',
-			background: 'rgba(0, 0, 0, 0.7)',
-		});
+        userApi.userLogin({
+            username: param.username,
+            password: param.password
+        }).then(async (data: any) => {
+            // 判断用户是否登录成功
+            if (!data) return;
 
+            console.log("login data", data, data.userInfo);
 
-		await send_request('v1/user/login', "POST", {
-			userName: param.username,
-			passWord: param.password
-		}, async (data: UserInfo) => {
-			// 判断用户是否登录成功
-			if (!data) {
-				ElMessage.error("用户名或密码错误");
-				return;
-			}
-			ElMessage.success('登录成功');
-			localStorage.setItem('ms_username', data.username);
-			localStorage.setItem('ms_user_id', data.id);
-			localStorage.setItem('ms_role_id', data.roleId);
+            ElMessage.success('登录成功');
+            localStorage.setItem('ms_username', data.userInfo?.username);
+            localStorage.setItem('ms_realname', data.userInfo?.realname);
+            localStorage.setItem('ms_user_id', data.userInfo?.id);
+            localStorage.setItem('ms_role_id', data.userInfo?.role);
 
-			let defaultList = {};
-			await send_request('v1/role/list', "GET", {}, (roleList: Array<RoleInfo>) => {
-				for (let role of roleList) {
-					defaultList[role.id.toString()] = role.privileges.map((i: any) => i.module)
-				}
-			});
-
-			permiss.defaultList = defaultList;
-			permiss.key = defaultList[data.roleId];
-			if (typeof (permiss.key) === "undefined") return;
-			localStorage.setItem('ms_keys', JSON.stringify(permiss.key));
-			localStorage.setItem('ms_default_list', JSON.stringify(defaultList));
-			let targetRoute: any = router.currentRoute?.value?.query?.redirectTo
-			if (targetRoute && !targetRoute.includes('/login')) {
-				router.push(targetRoute);
-			} else {
-				router.push('/');
-			}
-		});
-		loading.close();
-	});
+            let targetRoute: any = router.currentRoute?.value?.query?.redirectTo
+            if (targetRoute && !targetRoute.includes('/login')) {
+                router.push(targetRoute);
+            } else {
+                router.push('/');
+            }
+        })
+    });
 };
 
 const tags = useTagsStore();
@@ -166,57 +139,57 @@ tags.clearTags();
 
 <style scoped>
 .login-wrap {
-	width: 100%;
-	height: 100%;
+    width: 100%;
+    height: 100%;
 }
 
 .login-container {
-	width: 100%;
-	height: 100%;
-	display: grid;
-	place-items: center;
+    width: 100%;
+    height: 100%;
+    display: grid;
+    place-items: center;
 }
 
 .ms-title {
-	width: 100%;
-	padding: 18px 24px;
-	box-sizing: border-box;
-	text-align: center;
-	font-size: 20px;
-	color: #fff;
-	border-bottom: 1px solid #ddd;
+    width: 100%;
+    padding: 18px 24px;
+    box-sizing: border-box;
+    text-align: center;
+    font-size: 20px;
+    color: #fff;
+    border-bottom: 1px solid #ddd;
 }
 
 .ms-login {
-	width: min(380px, 95vw);
-	padding: 5px 10px;
-	border-radius: 5px;
-	background: rgba(255, 255, 255, 0.3);
-	overflow: hidden;
+    width: min(380px, 95vw);
+    padding: 5px 10px;
+    border-radius: 5px;
+    background: rgba(255, 255, 255, 0.3);
+    overflow: hidden;
 }
 
 .ms-content {
-	padding: 30px 30px;
+    padding: 30px 30px;
 }
 
 .login-btn {
-	text-align: center;
+    text-align: center;
 }
 
 .login-btn button {
-	width: 100%;
-	height: 36px;
-	margin-bottom: 10px;
+    width: 100%;
+    height: 36px;
+    margin-bottom: 10px;
 }
 
 .company-info {
-	color: #7589b6;
-	text-align: center;
-	position: absolute;
-	left: 0;
-	right: 0;
-	bottom: 10px;
-	font-size: 13px;
-	letter-spacing: 1px;
+    color: #7589b6;
+    text-align: center;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 10px;
+    font-size: 13px;
+    letter-spacing: 1px;
 }
 </style>