feature: 添加登陆逻辑

mock/demo/account.ts

@@ -1,54 +1,29 @@
-import { MockMethod } from 'vite-plugin-mock'
+import { MockMethod, Recordable } from 'vite-plugin-mock'
 
 const userInfo = {
-	name: 'Vben',
+	name: '爱喝蜂蜜绿的小斯斯',
 	userid: '00000001',
-	email: 'test@gmail.com',
-	signature: '海纳百川，有容乃大',
+	email: '1531733886@qq.com',
+	signature:
+		'甜甜的蜂蜜，甘甜的绿茶，蜂蜜中和了绿茶的苦涩保留了绿茶回甘，绝妙啊',
 	introduction: '微笑着，努力着，欣赏着',
-	title: '交互专家',
-	group: '某某某事业群－某某平台部－某某技术部－UED',
-	tags: [
-		{
-			key: '0',
-			label: '很有想法的',
-		},
-		{
-			key: '1',
-			label: '专注设计',
-		},
-		{
-			key: '2',
-			label: '辣~',
-		},
-		{
-			key: '3',
-			label: '大长腿',
-		},
-		{
-			key: '4',
-			label: '川妹子',
-		},
-		{
-			key: '5',
-			label: '海纳百川',
-		},
-	],
-	notifyCount: 12,
-	unreadCount: 11,
-	country: 'China',
-	address: 'Xiamen City 77',
-	phone: '0592-268888888',
+	title: '小斯斯',
+	token: '',
 }
 
 export default [
 	{
 		url: '/mock_api/login',
 		timeout: 1000,
 		method: 'post',
-		response: (data: any) => {
-			console.log(data)
-			return userInfo
+		response: ({ body }: { body: Recordable }) => {
+			const { username, password } = body
+			if (username == 'admin' && password == 'admin123') {
+				userInfo.token = genID(16)
+				return { data: userInfo }
+			} else {
+				return { data: { error: '账号密码错误' } }
+			}
 		},
 	},
 	{
@@ -60,3 +35,9 @@ export default [
 		},
 	},
 ] as MockMethod[]
+
+function genID(length: number) {
+	return Number(
+		Math.random().toString().substr(3, length) + Date.now()
+	).toString(36)
+}

src/router/index.ts

@@ -28,5 +28,14 @@ export const configMainRouter = (app: App<Element>) => {
 }
 
 route.beforeEach((to, _from, next) => {
-	next()
+	const userInfo = localStorage.getItem('userInfo')
+	if (userInfo) {
+		next()
+	} else {
+		if (to.path !== '/login') {
+			next({ path: '/login' })
+		} else {
+			next()
+		}
+	}
 })

src/views/login/index.vue

@@ -7,33 +7,36 @@
 		<div class="login-box enter-x">
 			<div class="login-form">
 				<h2 class="enter-x p-4">SuperCuteXiaoSi</h2>
-				<div class="input-group user enter-x">
-					<SvgIcon class-name="icon" name="iEL-avatar"></SvgIcon>
-					<div>
-						<h5>用户名</h5>
-						<input
-							v-model="user"
-							type="text"
-							class="input"
-							@focus="onUserFocus"
-							@blur="onUserBlur"
-						/>
+				<form>
+					<div class="input-group user enter-x">
+						<SvgIcon class-name="icon" name="iEL-avatar"></SvgIcon>
+						<div>
+							<h5>用户名</h5>
+							<input
+								v-model="user"
+								type="text"
+								class="input"
+								@focus="onUserFocus"
+								@blur="onUserBlur"
+							/>
+						</div>
 					</div>
-				</div>
-				<div class="input-group pwd enter-x">
-					<SvgIcon class-name="icon" name="password"></SvgIcon>
-
-					<div>
-						<h5>密码</h5>
-						<input
-							v-model="pwd"
-							type="password"
-							class="input"
-							@focus="onPwdFocus"
-							@blur="onPwdBlur"
-						/>
+					<div class="input-group pwd enter-x">
+						<SvgIcon class-name="icon" name="password"></SvgIcon>
+
+						<div>
+							<h5>密码</h5>
+							<input
+								v-model="pwd"
+								type="password"
+								class="input"
+								autocomplete="on"
+								@focus="onPwdFocus"
+								@blur="onPwdBlur"
+							/>
+						</div>
 					</div>
-				</div>
+				</form>
 				<button class="btn enter-x" @click="onLogin">登录</button>
 			</div>
 		</div>
@@ -42,22 +45,26 @@
 
 <script setup lang="ts">
 import SvgIcon from '@/components/SvgIcon/index.vue'
-
+import { useRouter } from 'vue-router'
 import { ref } from 'vue'
 import { addClass, removeClass } from '@/utils/operate'
+import { deffHttp } from '@/utils/axios'
 
-// eslint-disable-next-line vue/return-in-computed-property
+const router = useRouter()
 
 let user = ref('')
 let pwd = ref('')
 
-const onLogin = (): void => {
-	// storageSession.setItem('info', {
-	// 	username: 'admin',
-	// 	accessToken: 'eyJhbGciOiJIUzUxMiJ9.test',
-	// })
-	// initRouter('admin').then(() => {})
-	// router.push('/')
+const onLogin = async (): Promise<void> => {
+	const res = await deffHttp.post<any>(
+		{
+			url: '/mock_api/login',
+			data: { username: user.value, password: pwd.value },
+		},
+		{ isShowData: true }
+	)
+	localStorage.setItem('userInfo', JSON.stringify(res.data))
+	router.push('/')
 }
 
 function onUserFocus() {

tsconfig.json

@@ -18,6 +18,7 @@
 		"noUnusedLocals": true,
 		"noUnusedParameters": true,
 		"experimentalDecorators": true,
+		"noImplicitAny": true,
 		"types": ["vite/client"],
 		"typeRoots": ["./node_modules/@types/", "./types"],
 		"lib": ["esnext", "dom"],