diff --git a/vblog/logs/vblog.log b/vblog/logs/vblog.log
index 1024e5b..a296dca 100644
--- a/vblog/logs/vblog.log
+++ b/vblog/logs/vblog.log
@@ -221,3 +221,16 @@
{"level":"info","component":"server","time":"2025-01-12T09:32:52+08:00","caller":"ioc/server/server.go:77","message":"loaded defaults: []"}
{"level":"info","component":"http","time":"2025-01-12T09:32:52+08:00","caller":"config/http/http.go:144","message":"HTTP服务启动成功, 监听地址: 127.0.0.1:8080"}
{"level":"debug","time":"2025-01-12T09:33:34+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"}
+{"level":"debug","time":"2025-01-12T11:00:05+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"}
+{"level":"debug","time":"2025-01-12T11:01:23+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"}
+{"level":"debug","time":"2025-01-12T11:01:24+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"}
+{"level":"debug","time":"2025-01-12T11:01:33+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"}
+{"level":"debug","time":"2025-01-12T11:01:36+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"}
+{"level":"debug","time":"2025-01-12T11:02:57+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"}
+{"level":"debug","time":"2025-01-12T11:03:31+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"}
+{"level":"debug","time":"2025-01-12T11:03:48+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"}
+{"level":"debug","time":"2025-01-12T11:17:11+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"}
+{"level":"debug","time":"2025-01-12T11:17:18+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"}
+{"level":"debug","time":"2025-01-12T11:19:41+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"}
+{"level":"debug","time":"2025-01-12T11:25:37+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"}
+{"level":"debug","time":"2025-01-12T11:44:07+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"}
diff --git a/vblog/web/README.md b/vblog/web/README.md
index 6e69ffe..5adcf93 100644
--- a/vblog/web/README.md
+++ b/vblog/web/README.md
@@ -322,3 +322,88 @@ const routes = [
},
]
```
+
+```js
+// 文章管理
+// 标签管理
+const handleMenuItemClick = (key) => {
+ // https://router.vuejs.org/zh/guide/essentials/navigation.html
+ router.push({ name: key })
+}
+```
+
+## 登录与退出
+
+```js
+const summitLoading = ref(false)
+const handleSubmit = async (data) => {
+ if (data.errors === undefined) {
+ try {
+ summitLoading.value = true
+ const tk = await LOGIN(data.values)
+ // 保存当前用户的登录状态
+ token.value.access_token = tk.access_token
+ token.value.ref_user_name = tk.ref_user_name
+ token.value.refresh_token = tk.refresh_token
+
+ // 需要把用户重定向到Home页面去了
+ router.push({ name: 'blog_management' })
+ } catch (error) {
+ console.log(error)
+ } finally {
+ summitLoading.value = false
+ }
+ }
+}
+```
+
+```js
+const logout = () => {
+ // 需要调用Logout接口的, 自己添加下退出接口
+ // 之前的登录状态给清理掉, store
+ token.value = undefined
+ // 需要重定向到登录页面
+ router.push({ name: 'login' })
+}
+```
+
+## 导航守卫
+
+https://router.vuejs.org/zh/guide/advanced/navigation-guards.html
+
+```js
+const router = createRouter({ ... })
+
+router.beforeEach((to, from) => {
+ // ...
+ // 返回 false 以取消导航
+ return false
+})
+```
+
+```js
+router.beforeEach((to, from) => {
+ const whiteList = ['login']
+ if (!whiteList.includes(to.name)) {
+ // 需要做权限判断
+ if (isLogin()) {
+ return true
+ }
+ // 返回跳转后的页面
+ return { name: 'login' }
+ }
+})
+```
+
+## 覆盖UI的默认样式
+
+css, :deep(), 用于选择需要覆盖的class进行覆盖
+
+:deep 选择器并不是一个通用的 CSS 选择器，而是特定于某些框架（如 Vue.js 和 Svelte）中用于 Scoped CSS 的一个特性。它的主要目的是允许开发者在使用 Scoped CSS 的情况下，能够针对子组件或外部组件的样式进行覆盖。
+
+```js
+
+
diff --git a/vblog/web/src/views/common/LoginPage.vue b/vblog/web/src/views/common/LoginPage.vue
index 9dcbc42..ef12125 100644
--- a/vblog/web/src/views/common/LoginPage.vue
+++ b/vblog/web/src/views/common/LoginPage.vue
@@ -37,6 +37,9 @@
import { reactive, ref } from 'vue';
import { LOGIN } from '@/api/token.js'
import { token } from '@/stores/token'
+import { useRouter } from 'vue-router';
+
+const router = useRouter()
const loginForm = reactive({
username: '',
@@ -56,6 +59,7 @@ const handleSubmit = async (data) => {
token.value.refresh_token = tk.refresh_token
// 需要把用户重定向到Home页面去了
+ router.push({ name: 'blog_management' })
} catch (error) {
console.log(error)
} finally {