Token Jquery HTML Login localStorage
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>JWT 登入範例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>登入</h2>
<label>帳號：<input type="text" id="Account" /></label><br/>
<label>密碼：<input type="password" id="password" /></label><br/>
<button id="loginBtn">登入</button>
<hr/>
<h2>歡迎區</h2>
<div id="welcome"></div>
<button id="getProfileBtn">取得資料</button>
<script>
const apiBase = 'https://localhost:1234';
// 登入範例
$('#loginBtn').click(function () {
const Account = $('#Account').val();
const password = $('#password').val();
$.ajax({
url: apiBase + '/Api/account/Login',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({ Account, password }),
success: function (res) {
if (res.status === 0) {
const token = res.data.accessToken;
const name = res.data.userName;
const userId = res.data.userId;
localStorage.setItem('token', token);
localStorage.setItem('userName', name);
localStorage.setItem('userId', userId);
$('#welcome').text('歡迎您，' + name + '（ID: ' + userId + '）');
} else {
alert('登入失敗：' + res.description);
}
},
error: function () {
alert('API 請求失敗');
}
});
});
// 取資料範例
$('#getProfileBtn').click(function () {
const token = localStorage.getItem('token');
if (!token) {
alert('請先登入');
return;
}
$.ajax({
url: apiBase + '/Api/Aaa/Bbb',
type: 'GET',
headers: {
Authorization: 'Bearer ' + token
},
success: function (res) {
alert('取得個人資料成功：' + JSON.stringify(res));
},
error: function () {
alert('Token 可能已過期或無效');
}
});
});
</script>
</body>
</html>
我只是一棵樹