用户登录,用户注册

2 years ago · 74808ae9fa
parent dfff087598
commit 74808ae9fa
8 changed files with 383 additions and 35 deletions
--- a/db.sqlite3
+++ b/db.sqlite3
--- 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请求中
--- 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 {
--- 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>
--- 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({
--- a/frontend/src/views/LoginView.vue
+++ 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>
--- a/frontend/src/views/RegisterView.vue
+++ 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>
--- 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()