Skip to content

Commit 6962d47

Browse files
author
“jiafen”
committed
新增登入登出功能
1 parent 59f7121 commit 6962d47

File tree

5 files changed

+112
-49
lines changed

5 files changed

+112
-49
lines changed

‎src/components/Sidebar.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<span>asd</span>
1515
</el-menu-item>
1616
</el-menu>
17-
<el-button type="primary" class="w-full bg-gray-600 hover:bg-gray-500 border-gray-600 hover:border-gray-500 rounded-none">
17+
<el-button @click="$emit('singOut')" type="primary" class="w-full bg-gray-600 hover:bg-gray-500 border-gray-600 hover:border-gray-500 rounded-none">
1818
<span>登出</span>
1919
</el-button>
2020
</el-aside>
@@ -27,11 +27,12 @@
2727
default: true
2828
}
2929
})
30+
defineEmits(['singOut'])
3031
</script>
3132

3233
<style scoped>
3334
.el-menu-item.is-active {
34-
background-color: #4B5563;
35+
background-color: #4B5563;
3536
}
3637
</style>
3738

‎src/composables/apis.js‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,23 @@
11
import { GET, POST, PUT, DELETE } from '@/composables/base'
22

3+
const checkLoginStatus = async () => {
4+
const res = await GET('/public/user')
5+
return res
6+
}
7+
38
const login = async (data) => {
49
const res = await POST('/public/login', data)
10+
return res
11+
}
12+
13+
const logout = async () => {
14+
const res = await GET('/public/logout')
15+
return res
16+
}
17+
18+
const tableNames = async () => {
19+
const res = await GET('/private/tables')
20+
return res
521
}
622

7-
export { login }
23+
export { login, logout, checkLoginStatus, tableNames }

‎src/router/index.js‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
import { createRouter, createWebHistory } from 'vue-router'
22
import HomeView from '../views/HomeView.vue'
33

4+
import { checkLoginStatus } from '@/composables/apis'
5+
46
const router = createRouter({
57
history: createWebHistory(import.meta.env.BASE_URL),
68
routes: [
79
{
810
path: '/',
911
name: 'home',
10-
component: HomeView
12+
component: HomeView,
13+
meta: { requiresAuth: true }
1114
},
1215
{
1316
path: '/login',
@@ -17,4 +20,16 @@ const router = createRouter({
1720
]
1821
})
1922

23+
// router.beforeEach(async (to, from, next) => {
24+
// const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
25+
// if (!requiresAuth) return next()
26+
// try {
27+
// const res = await checkLoginStatus()
28+
// if (res.data.status !== 200) return next('/login')
29+
// next()
30+
// } catch (error) {
31+
// next('/login')
32+
// }
33+
// })
34+
2035
export default router

‎src/views/HomeView.vue‎

Lines changed: 55 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<main>
33
<el-container class="h-screen">
4-
<Sidebar :sidebarOpen="sidebarOpen"/>
4+
<Sidebar :sidebarOpen="sidebarOpen" @singOut="singOut"/>
55
<el-container>
66
<el-header class="bg-white border-b flex items-center justify-between md:justify-end">
77
<el-icon @click="toggleSidebar" class="text-black block md:hidden cursor-pointer"><Menu /></el-icon>
@@ -16,30 +16,60 @@
1616
</template>
1717

1818
<script setup>
19-
import { ref, nextTick } from 'vue'
20-
import { Menu } from '@element-plus/icons-vue'
21-
import Sidebar from '@/components/Sidebar.vue'
22-
import Table from '@/components/Table.vue'
23-
const tableData = ref([
24-
{ name: '4421', date: '2024-09-25T14:20:23' },
25-
{ name: 'asdsd', date: '2024-09-25T13:37:54' },
26-
{ name: 'vsssssss', date: '2024-09-25T14:20:23' },
27-
{ name: 'vsssssss', date: '2024-09-25T14:20:23' },
28-
{ name: 'vsssssss', date: '2024-09-25T14:20:23' },
29-
{ name: 'vsssssss', date: '2024-09-25T14:20:23' },
30-
{ name: 'vsssssss', date: '2024-09-25T14:20:23' },
31-
{ name: 'vsssssss', date: '2024-09-25T14:20:23' },
32-
{ name: 'vsssssss', date: '2024-09-25T14:20:23' },
33-
{ name: 'vsssssss', date: '2024-09-25T14:20:23' },
34-
{ name: 'vsssssss', date: '2024-09-25T14:20:23' },
35-
{ name: 'vsssssss', date: '2024-09-25T14:20:23' },
36-
{ name: 'vsssssss', date: '2024-09-25T14:20:23' },
37-
])
38-
39-
const sidebarOpen = ref(true)
40-
const toggleSidebar = async () => {
41-
sidebarOpen.value = !sidebarOpen.value
42-
await nextTick()
19+
import { ref, nextTick, onBeforeMount } from 'vue'
20+
import { useRouter } from 'vue-router'
21+
import { Menu } from '@element-plus/icons-vue'
22+
import { ElMessage } from 'element-plus'
23+
import Sidebar from '@/components/Sidebar.vue'
24+
import Table from '@/components/Table.vue'
25+
26+
import { logout, tableNames } from '@/composables/apis'
27+
28+
const router = useRouter()
29+
30+
const tableData = ref([
31+
{ name: '4421', date: '2024-09-25T14:20:23' },
32+
{ name: 'asdsd', date: '2024-09-25T13:37:54' },
33+
{ name: 'vsssssss', date: '2024-09-25T14:20:23' },
34+
{ name: 'vsssssss', date: '2024-09-25T14:20:23' },
35+
{ name: 'vsssssss', date: '2024-09-25T14:20:23' },
36+
{ name: 'vsssssss', date: '2024-09-25T14:20:23' },
37+
{ name: 'vsssssss', date: '2024-09-25T14:20:23' },
38+
{ name: 'vsssssss', date: '2024-09-25T14:20:23' },
39+
{ name: 'vsssssss', date: '2024-09-25T14:20:23' },
40+
{ name: 'vsssssss', date: '2024-09-25T14:20:23' },
41+
{ name: 'vsssssss', date: '2024-09-25T14:20:23' },
42+
{ name: 'vsssssss', date: '2024-09-25T14:20:23' },
43+
{ name: 'vsssssss', date: '2024-09-25T14:20:23' },
44+
])
45+
46+
const sidebarOpen = ref(true)
47+
const toggleSidebar = async () => {
48+
sidebarOpen.value = !sidebarOpen.value
49+
// await nextTick()
50+
}
51+
52+
const singOut = async () =>{
53+
try {
54+
const message = ElMessage.success('登出成功!')
55+
const res = await logout()
56+
if(res.status === 200) message
57+
setTimeout(() => {
58+
router.push('login')
59+
message.close()
60+
}, 1000)
61+
} catch (error) {
62+
ElMessage.success('登出失敗!')
4363
}
64+
}
65+
import { checkLoginStatus } from '@/composables/apis'
4466
67+
onBeforeMount( async () => {
68+
try {
69+
const res = await tableNames()
70+
console.log(res)
71+
} catch (error) {
72+
73+
}
74+
})
4575
</script>

‎src/views/LoginView.vue‎

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<template>
22
<div class="h-screen flex items-center justify-center bg-gray-100">
3-
<el-card class="w-1/3 max-w-md h-1/2 flex flex-col justify-around">
3+
<el-card class="w-1/3 max-w-md h-1/2 flex flex-col justify-around min-w-[230px]">
44
<div class="text-center mb-2">
5-
<p class="text-sm text-gray-600 mt-1">請登入您的帳戶</p>
5+
<p class="text-gray-600 mt-1">請登入您的帳戶</p>
66
</div>
77
<el-form :model="form" :rules="rules" ref="loginForm" @submit.prevent="onSubmit" class="space-y-4">
88
<el-form-item prop="email">
99
<el-input
1010
v-model="form.email"
11-
placeholder="用戶名"
12-
prefix-icon="el-icon-user"
11+
placeholder="信箱"
12+
:prefix-icon="User"
1313
class="w-full">
1414
</el-input>
1515
</el-form-item>
@@ -19,7 +19,7 @@
1919
v-model="form.password"
2020
type="password"
2121
placeholder="密碼"
22-
prefix-icon="el-icon-lock"
22+
:prefix-icon="Lock"
2323
class="w-full"
2424
></el-input>
2525
</el-form-item>
@@ -37,8 +37,12 @@
3737

3838
<script setup>
3939
import { ref } from 'vue'
40+
import { useRouter } from 'vue-router'
4041
import { ElMessage } from 'element-plus'
4142
import { login } from '@/composables/apis'
43+
import { Lock, User } from '@element-plus/icons-vue'
44+
45+
const router = useRouter()
4246
4347
const loginForm = ref(null)
4448
const form = ref({
@@ -48,29 +52,26 @@
4852
4953
const rules = {
5054
email: [
51-
{ required: true, message: '請輸入用戶名', trigger: 'blur' }
55+
{ required: true, message: '請輸入信箱', trigger: 'blur' }
5256
],
5357
password: [
5458
{ required: true, message: '請輸入密碼', trigger: 'blur' }
5559
]
5660
}
5761
5862
const onSubmit = () => {
59-
loginForm.value.validate(async(valid) => {
60-
if (valid) {
61-
try {
63+
loginForm.value.validate( async (valid) => {
64+
if (!valid) return ElMessage.error('請正確填寫登入信息')
65+
try {
66+
const message = ElMessage.success('登入成功!')
6267
const res = await login(form.value)
63-
console.log(loginForm.value)
64-
console.log(form.value)
65-
console.log(res)
66-
ElMessage.success('登入成功!')
67-
} catch (error) {
68-
console.log(error)
69-
}
70-
71-
// 登入成功後可以進行路由跳轉等操作
72-
} else {
73-
ElMessage.error('請正確填寫登入信息')
68+
if (res.status === 200) message
69+
setTimeout(() => {
70+
router.push('/')
71+
message.close()
72+
}, 1000)
73+
} catch (error) {
74+
ElMessage.success('登入失敗!')
7475
}
7576
})
7677
}

0 commit comments

Comments
 (0)