Vue 用戶登錄的基本流程包括以下6個步驟：
步驟：
1. 創建登錄表單
在前端，首先要創建一個登錄表單，用戶輸入賬號（用戶名、郵箱、手機號等）和密碼。
示例：Login.vue
<template><div><form @submit.prevent="handleLogin"><div><label for="username">用戶名</label><input type="text" id="username" v-model="username" placeholder="請輸入用戶名" /></div><div><label for="password">密碼</label><input type="password" id="password" v-model="password" placeholder="請輸入密碼" /></div><button type="submit">登錄</button></form></div>
</template><script>
export default {data() {return {username: '',password: ''};},methods: {handleLogin() {const userData = {username: this.username,password: this.password};this.$axios.post('/api/user/login', userData).then(response => {if (response.data.status === 'success') {// 登錄成功，保存 token 到 localStorage 或 sessionStoragelocalStorage.setItem('authToken', response.data.token);this.$router.push('/admin'); // 跳轉到管理頁面} else {this.$message.error(response.data.message); // 顯示錯誤信息}}).catch(error => {this.$message.error('登錄失敗，請重試');});}}
};
</script>
2. 發送登錄請求到后端
在 handleLogin 方法中，使用 axios 發送 POST 請求到后端 API /api/user/login，并攜帶用戶輸入的用戶名和密碼。
示例：后端登錄接口（Node.js + Express）
app.post('/api/user/login', (req, res) => {const { username, password } = req.body;// 查找用戶let query = '';let params = [];// 判斷用戶名是郵箱、電話還是普通用戶名if (emailRegex.test(username)) {query = 'SELECT * FROM users WHERE email = ?';params = [username];} else if (phoneRegex.test(username)) {query = 'SELECT * FROM users WHERE phone = ?';params = [username];} else {query = 'SELECT * FROM users WHERE username = ?';params = [username];}db.query(query, params, (err, results) => {if (err) {return res.status(500).json({ message: '數據庫錯誤' });}if (results.length === 0) {return res.status(404).json({ message: '用戶不存在' });}const user = results[0];// 驗證密碼bcrypt.compare(password, user.password, (err, isMatch) => {if (err || !isMatch) {return res.status(401).json({ message: '密碼錯誤' });}// 創建 JWT tokenconst token = jwt.sign({ id: user.id, username: user.username }, secretKey, { expiresIn: '1h' });res.status(200).json({status: 'success',message: '登錄成功',token: token // 將 token 返回給前端});});});
});
3. 保存 Token
在用戶登錄成功后，后端會返回一個 JWT（JSON Web Token）。前端接收到這個 token 后，需要將它存儲到瀏覽器的 localStorage 或 sessionStorage 中，以便后續的請求使用。
localStorage.setItem('authToken', response.data.token);
4. 進行路由保護
登錄后，前端應該根據 token 來判斷用戶是否已認證。在每個需要認證的路由（例如管理頁面）中，使用路由守衛進行驗證。
示例：路由守衛
const router = new VueRouter({routes: [{path: '/admin',component: AdminPage,beforeEnter: (to, from, next) => {const token = localStorage.getItem('authToken');if (token) {next(); // 已登錄，繼續訪問} else {next('/login'); // 未登錄，重定向到登錄頁}}},{path: '/login',component: LoginPage}]
});
5. 發起受保護請求
在后續的 API 請求中，前端會把保存的 token 附加到請求頭部，發送給后端驗證。
示例：發起受保護的 API 請求
this.$axios.get('/api/protected/resource', {headers: {Authorization: `Bearer ${localStorage.getItem('authToken')}`}
}).then(response => {console.log('Protected data:', response.data);}).catch(error => {console.error('Error:', error.response);});
6. 登出功能
用戶登出時，前端需要刪除存儲的 token，并跳轉到登錄頁面。
示例：登出功能
logout() {localStorage.removeItem('authToken'); // 刪除 tokenthis.$router.push('/login'); // 跳轉到登錄頁面
}
總結流程：
- 用戶在登錄頁輸入用戶名和密碼。
- 前端發送
POST請求到后端，攜帶用戶名和密碼。 - 后端驗證用戶信息，生成并返回 JWT Token。
- 前端保存 token，并跳轉到受保護頁面。
- 在后續的 API 請求中，前端將 token 附加在請求頭部。
- 用戶登出時，刪除 token 并跳轉到登錄頁面。
)
)
