drf_vue_blog/frontend/src/views/LoginView.vue

<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";
import { useStore } from 'vuex';

export default {
	name: "LoginView",
	components: {
		BlogHeader,
		BlogFooter,
	},
	setup() {
        
		let username = ref("");
		let password = ref("");

        const store = useStore();

		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 + 24*3600*1000;
                    storage.setItem('access_blog', resp.access);
                    storage.setItem('refresh_blog', resp.refresh);
                    storage.setItem('expired_time', expiredTime);
                    storage.setItem('username_blog', username.value);
                    $.ajax({
                        url: 'http://127.0.0.1:6789/api/user/' + username.value + '/',
                        type: 'GET',
                        success(resp){
                            // 保存该用户是否为管理员
                            storage.setItem("is_superuser_blog",resp.is_superuser);
                            store.commit("updateIsSuperUser",JSON.parse(storage.getItem("is_superuser_blog")));
                            console.log(store.state);
                        }
                    });

                    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>