From 74808ae9fa028a0bfc51253cb901c1cb4885e2e1 Mon Sep 17 00:00:00 2001
From: barney <15270405776@163.com>
Date: Mon, 26 Sep 2022 00:56:02 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=A8=E6=88=B7=E7=99=BB=E5=BD=95,=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E6=B3=A8=E5=86=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 db.sqlite3                              | Bin 196608 -> 196608 bytes
 drf_vue_blog/settings.py                |  16 +--
 frontend/src/components/ArticleList.vue |   2 +-
 frontend/src/components/BlogHeader.vue  | 127 +++++++++++++++++-----
 frontend/src/router/index.js            |  12 +++
 frontend/src/views/LoginView.vue        | 121 +++++++++++++++++++++
 frontend/src/views/RegisterView.vue     | 138 ++++++++++++++++++++++++
 user_info/views.py                      |   2 +-
 8 files changed, 383 insertions(+), 35 deletions(-)
 create mode 100644 frontend/src/views/LoginView.vue
 create mode 100644 frontend/src/views/RegisterView.vue

diff --git a/db.sqlite3 b/db.sqlite3
index 346a3fbb2d6f54f2a436bf867543ef5be2c310ee..f40bc79b661d30b29eb29459f510565f077bc739 100644
GIT binary patch
delta 580
zcmZo@;Av>!nIOf)$Tm^N2}mwX&}U?uoTx9%$hNsuzu$m|g?BRppA~-w-y`15n-vun
z^VT=Au<<f9+A?s6^YU_VI`S4IWv8SW#TREJ8kw4@7+V?ufr@uoRFqd<X}P08inD1@
zv7vWGa8|ylN=iVbk9mcQS)pfsRDOX$aK1rNc~+IXd9Gn%qDg9%Pi}T#x>I^VmZN{M
zZAofziJ_5!k&&)}rLK{wf{~Gxsfm>dhmoGKiG``T!DOqvCH3qKjhc<jtPlr@;&D)L
zc#?B+NRo-ApFxDFQ*d#aQGl<fk4kD*VPbMnP(^TZMskWlnRBY8VOCURo=1_ZK~kEz
zg}HWmWtvZ_ubYRlFW5oI?lH77<u<l5wa_y$w=gm=nVgY7hlhp#4g>#p{%8Dm_}_09
zEI7k2%*iay2=)pa2eT-c#oGM7e*61+Mo|R;HvYQ|{O|c+@;~Ok%m17ID^SZxejZk4
zMn)DkFv&Xo<$6YGJ~sZx4E%q927lsz%l~4#zy+p@{G2SzoQ!NBV)C2&5&~>|O$_|I
z`Rn=J_-^y9=W7B+RvurZHXA2{BfmH=BPS!8(~Yf+4D~F5z{J1=>^>G|Emn|XQJjhm
Y4UCP9j6sT7nA>lkW88lG9FwXc0CyUm2><{9

delta 294
zcmZo@;Av>!nIOf)@PDF=6Ode(pwGxMIZ<Djk!f?Oe!l?+6Q30WpA~<`W<>=(zR6a3
zOIUgt8Z{^9=Zn`H8JZaw7^sw|1Qa@ZM+W7E_@t{OI_5@s`{Y--g{FBMIaO5_C5QQz
z6b4k~m}aDvn)sS#YP(wchv@5P__^8|85kMq8d&NY87ml?Seckv85rrAm>HRynpLG0
zz$J|uWtn&x8f_gLMIkh&FfT7Br!nv3iu@i9CjR#f{NMTCZx(F0$ImKIm64d&{Jwts
z`+7!E1r8Semkj*x`Co1qSipFef8qjx=`YtaO7pPrzh&V61Jw12|1D78UH-{$?~C)W
f@ZDzM-_2jo@5Xl<=-JbJ?YGY{ZohqwN!1VlnMhn!

diff --git a/drf_vue_blog/settings.py b/drf_vue_blog/settings.py
index d26b596..801c357 100644
--- a/drf_vue_blog/settings.py
+++ b/drf_vue_blog/settings.py
@@ -125,9 +125,9 @@ REST_FRAMEWORK = {
     'PAGE_SIZE': 5,
     # 使用django-filter后端过滤引擎
     'DEFAULT_FILTER_BACKENDS': ['django_filters.rest_framework.DjangoFilterBackend'],
-    # 'DEFAULT_AUTHENTICATION_CLASSES': (
-    #     'rest_framework_simplejwt.authentication.JWTAuthentication',
-    # ),
+    'DEFAULT_AUTHENTICATION_CLASSES': (
+        'rest_framework_simplejwt.authentication.JWTAuthentication',
+    ),
 }
 
 # 媒体文件
@@ -136,12 +136,12 @@ MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
 
 DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
 
-#
+# simple_jwt配置
 
-# SIMPLE_JWT = {
-#     'ACCESS_TOKEN_LIFETIME': timedelta(days=1),  # 令牌有效时间为1天
-#     'REFRESH_TOKEN_LIFETIME': timedelta(days=10),  # 令牌每10天刷新一次
-# }
+SIMPLE_JWT = {
+    'ACCESS_TOKEN_LIFETIME': timedelta(minutes=1),  # 令牌有效时间为1分钟,便于测试
+    'REFRESH_TOKEN_LIFETIME': timedelta(days=10),  # 令牌每10天刷新一次
+}
 
 
 #将允许将cookie包含在跨站点HTTP请求中
diff --git a/frontend/src/components/ArticleList.vue b/frontend/src/components/ArticleList.vue
index 44da490..1d21296 100644
--- a/frontend/src/components/ArticleList.vue
+++ b/frontend/src/components/ArticleList.vue
@@ -182,7 +182,7 @@ export default {
 
 #paginator {
 	text-align: center;
-	padding-top: 2rem;
+    padding-bottom: 3rem;
 }
 
 #paginator a {
diff --git a/frontend/src/components/BlogHeader.vue b/frontend/src/components/BlogHeader.vue
index 557522c..c769c7b 100644
--- a/frontend/src/components/BlogHeader.vue
+++ b/frontend/src/components/BlogHeader.vue
@@ -5,39 +5,98 @@
 			<h1>My Drf-Vue Blog</h1>
 			<div class="search">
 				<form>
-					<input v-model="searchText" type="text" placeholder="输入搜索内容..." />
-					<button v-on:click.prevent="searchArticles">
-                    </button>
+					<input
+						v-model="searchText"
+						type="text"
+						placeholder="输入搜索内容..."
+					/>
+					<button v-on:click.prevent="searchArticles"></button>
 				</form>
 			</div>
-            <hr>
+			<hr />
+			<div class="register">
+				<div v-if="haslogin">
+				</div>
+                <div v-else>
+                    <router-link to="/register" class="register-link">注册</router-link>
+                </div>
+			</div>
+			<div class="login">
+				<div v-if="haslogin">欢迎, {{ username }}</div>
+				<div v-else>
+					<router-link to="/login" class="login-link"
+						>登录</router-link
+					>
+				</div>
+			</div>
 		</div>
 	</div>
 </template>
 
 <script>
-import { ref } from "vue"
-import router from '@/router/index';
+import { ref,onMounted } from "vue";
+import router from "@/router/index";
+import $ from "jquery";
 
 export default {
 	name: "BlogHeader",
-    setup() {
-        let searchText = ref('');
-
-        const searchArticles = () => {
-            const text = searchText.value.trim();
-            if (text.charAt(0) !== '') {
-                router.push({name:'home', query: {search: text }})
+	setup() {
+		let username = ref("");
+		let haslogin = ref(false);
+		let searchText = ref("");
+
+        onMounted(() => {
+            const storage = localStorage;
+            // 过期时间
+            const expired_time = Number(storage.getItem("expired_time"));
+            // 当前时间
+            const current = new Date().getTime();
+            // 刷新令牌
+            const refreshToken = storage.getItem("refresh_blog");
+            // 用户名
+            username.value = storage.getItem("username_blog");
+            // 未过期
+            if (expired_time > current) {
+                haslogin.value = true;
             }
-        }
-
-        return {
-            searchText,
-            searchArticles,
-        }
-
-    }
-
+            // 初始tokeng过期,如果由刷新令牌申请新的token
+            else if (refreshToken !== null) {
+                $.ajax({
+                    url: "http://127.0.0.1:6789/api/token/refresh/",
+                    type: "POST",
+                    data: {
+                        refresh: refreshToken,
+                    },
+                    success(resp) {
+                        const nextExpiredTime = new Date().getTime() + 60000;
+                        storage.setItem("access_blog", resp.access);
+                        storage.removeItem("refresh_blog"); // 移除刷新令牌
+                        console.log("令牌刷新时间: ",new Date().toLocaleString());
+                        storage.setItem("expired_time", nextExpiredTime);
+                        haslogin.value = true;
+                    },
+                });
+            } else {
+                console.log("登录过期时间: ",new Date().toLocaleString());
+                storage.clear(); // 清除所有有效信息
+                haslogin.value = false;
+            }
+        });
+
+		const searchArticles = () => {
+			const text = searchText.value.trim();
+			if (text.charAt(0) !== "") {
+				router.push({ name: "home", query: { search: text } });
+			}
+		};
+
+		return {
+			searchText,
+			searchArticles,
+			username,
+			haslogin,
+		};
+	},
 };
 </script>
 
@@ -77,12 +136,12 @@ input {
 	height: 30px;
 	padding-left: 13px;
 	padding-right: 46px;
-    overflow:hidden;
-    text-overflow:ellipsis;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 button {
-    border: none;
+	border: none;
 	height: 30px;
 	width: 30px;
 	cursor: pointer;
@@ -110,4 +169,22 @@ button {
 	font-size: 13px;
 	color: white;
 }
+
+.login-link {
+	color: black;
+}
+
+.login {
+	text-align: left;
+	padding-left: 0.5rem;
+}
+
+.register-link {
+	color: black;
+}
+
+.register {
+	text-align: right;
+	padding-right: 0.5rem;
+}
 </style>
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 0572916..3e6a413 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -1,6 +1,8 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomePage from '@/views/HomePageView.vue'
 import ArticleDetail from '@/views/ArticleDetailView.vue'
+import LoginView from '@/views/LoginView.vue'
+import RegisterView from '@/views/RegisterView.vue'
 
 const routes = [
     {
@@ -13,6 +15,16 @@ const routes = [
         name: 'detail',
         component: ArticleDetail,
     },
+    {
+        path: '/login/',
+        name: 'login',
+        component: LoginView,
+    },
+    {
+        path: '/register/',
+        name: 'register',
+        component: RegisterView,
+    }
 ]
 
 const router = createRouter({
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
new file mode 100644
index 0000000..b6b501f
--- /dev/null
+++ b/frontend/src/views/LoginView.vue
@@ -0,0 +1,121 @@
+<template>
+	<BlogHeader />
+	<div class="grid">
+		<div id="login">
+			<h3>登录账号</h3>
+			<form>
+				<div class="form-elem">
+					<span>账号:&nbsp;</span>
+					<input
+						v-model="username"
+						type="text"
+						placeholder="请输入用户名"
+					/>
+				</div>
+
+				<div class="form-elem">
+					<span>密码:&nbsp;</span>
+					<input
+						type="password"
+						v-model="password"
+						placeholder="输入密码"
+                        autocomplete="true"
+					/>
+				</div>
+
+				<div class="form-elem">
+					<button v-on:click.prevent="login">登录</button>
+				</div>
+			</form>
+		</div>
+	</div>
+	<BlogFooter />
+</template>
+
+<script>
+import { ref } from "vue";
+import BlogHeader from "@/components/BlogHeader.vue";
+import BlogFooter from "@/components/BlogFooter.vue";
+import $ from "jquery";
+import router from "@/router/index";
+
+export default {
+	name: "LoginView",
+	components: {
+		BlogHeader,
+		BlogFooter,
+	},
+	setup() {
+		let username = ref("");
+		let password = ref("");
+        const current = (new Date()).getTime();
+        console.log(current);
+
+		const login = () => {
+			$.ajax({
+				url: "http://127.0.0.1:6789/api/token/",
+				type: "POST",
+				data: {
+					username: username.value,
+					password: password.value,
+				},
+				success(resp) {
+                    // 将token保存到localStorage
+                    const storage = localStorage;
+                    
+                    const current = (new Date()).getTime();
+                    const expiredTime = current + 60000;
+                    storage.setItem('access_blog', resp.access);
+                    storage.setItem('refresh_blog', resp.refresh);
+                    storage.setItem('expired_time', expiredTime);
+                    storage.setItem('username_blog', username.value);
+                    console.log("登录时间: ",new Date().toLocaleString());
+					router.push({ name: "home" });
+					
+				},
+				error(resp) {
+					console.log(resp);
+				},
+			});
+		};
+
+		return {
+			username,
+			password,
+			login,
+		};
+	},
+};
+</script>
+
+<style scoped>
+#grid {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+}
+
+#login {
+	text-align: center;
+}
+.form-elem {
+	padding: 10px;
+}
+input {
+	height: 25px;
+	padding-left: 10px;
+}
+button {
+	height: 35px;
+	cursor: pointer;
+	border: none;
+	outline: none;
+	background: gray;
+	color: whitesmoke;
+	border-radius: 5px;
+	width: 60px;
+}
+
+span {
+	font-weight: bold;
+}
+</style>
diff --git a/frontend/src/views/RegisterView.vue b/frontend/src/views/RegisterView.vue
new file mode 100644
index 0000000..86706e3
--- /dev/null
+++ b/frontend/src/views/RegisterView.vue
@@ -0,0 +1,138 @@
+<template>
+	<BlogHeader />
+	<div class="grid">
+		<div id="signup">
+			<h3>注册帐号</h3>
+			<form action="">
+				<div class="form-elem">
+					<span>账号:&nbsp;</span>
+					<input
+						v-model="username"
+						type="text"
+						placeholder="请输入用户名"
+					/>
+				</div>
+
+				<div class="form-elem">
+					<span>密码:&nbsp;</span>
+					<input
+						v-model="password"
+						type="password"
+						placeholder="请输入密码"
+                        autocomplete="true"
+					/>
+				</div>
+
+				<div class="form-elem">
+					<span>确认:&nbsp;</span>
+					<input
+						v-model="conform_password"
+						type="password"
+						placeholder="请再输入一次密码"
+                        autocomplete="true"
+					/>
+				</div>
+
+				<div class="form-elem">
+					<button v-on:click.prevent="signup">注册</button>
+				</div>
+			</form>
+		</div>
+	</div>
+	<BlogFooter />
+</template>
+
+<script>
+import { ref } from "vue";
+import BlogHeader from "@/components/BlogHeader.vue";
+import BlogFooter from "@/components/BlogFooter.vue";
+import $ from "jquery";
+import router from "@/router/index";
+
+export default {
+	name: "RegisterView",
+	components: {
+		BlogHeader,
+		BlogFooter,
+	},
+	setup() {
+		let username = ref("");
+		let password = ref("");
+		let conform_password = ref("");
+
+		const signup = () => {
+			if (
+				username.value === "" ||
+				password.value === "" ||
+				conform_password.value === ""
+			) {
+				window.alert("用户名或者密码为空");
+				return;
+			}
+
+			if (password.value !== conform_password.value) {
+				window.alert("两次密码输入不一致!");
+				return;
+			}
+
+			$.ajax({
+				url: "http://127.0.0.1:6789/api/user/",
+				type: "POST",
+				data: {
+					username: username.value,
+					password: password.value,
+				},
+				success(resp) {
+					console.log(resp);
+					window.alert("注册成功!即将跳转到登陆页面!");
+					setTimeout(() => {
+						router.push({ name: "login" }); // 注册成功，跳转登录页面
+					}, 200);
+				},
+				error(resp) {
+					console.log(resp);
+				},
+			});
+		};
+
+		return {
+			username,
+			password,
+			conform_password,
+			signup,
+		};
+	},
+};
+</script>
+
+<style scoped>
+#grid {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+}
+#signup {
+	text-align: center;
+}
+
+.form-elem {
+	padding: 10px;
+}
+input {
+	height: 25px;
+	padding-left: 10px;
+}
+button {
+	height: 35px;
+	cursor: pointer;
+	border: none;
+	outline: none;
+	background: gray;
+	color: whitesmoke;
+	border-radius: 5px;
+	width: 60px;
+}
+
+span {
+	font-weight: bold;
+}
+</style>
diff --git a/user_info/views.py b/user_info/views.py
index c0338cb..6a993a9 100644
--- a/user_info/views.py
+++ b/user_info/views.py
@@ -41,4 +41,4 @@ class UserViewSet(viewsets.ModelViewSet):
         else:
             self.permission_classes = [IsAuthenticatedOrReadOnly, IsSelfOrReadOnly]
 
-            return super(UserViewSet, self).get_permissions()
+        return super(UserViewSet, self).get_permissions()