### Vue3、Axios、JWT 和 Django REST Framework 的前后端分离登录逻辑
#### 前端部分：Vue3 配合 Axios 实现登录请求
在 Vue3 中，可以利用 `axios` 库发送 HTTP 请求来完成用户的登录操作。以下是具体的实现方法：
1. **安装依赖库**
安装 `axios` 来处理 HTTP 请求。
```bash
npm install axios
```
2. **创建登录组件**
创建一个名为 `Login.vue` 的组件用于展示登录表单并处理用户输入。
```vue
<template>
<div class="login-container">
<h2>登录</h2>
<form @submit.prevent="handleLogin">
<input type="text" v-model="username" placeholder="用户名" required />
<input type="password" v-model="password" placeholder="密码" required />
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
username: '',
password: ''
};
},
methods: {
async handleLogin() {
try {
const response = await axios.post('/api/token/', { // 向 DRF 提供的 JWT API 发送 POST 请求
username: this.username,
password: this.password
});
const token = response.data.access;
localStorage.setItem('token', token); // 将
获取到的 Token 存储至本地存储
this.$router.push('/dashboard'); // 跳转至受保护页面
} catch (error) {
console.error('登录失败:', error);
alert('用户名或密码错误');
}
}
}
};
</script>
```
3. **配置路由守卫**
使用 Vue Router
设置路由守卫以确保只有已登录用户才能访问某些页面[^2]。
```javascript
import { createRouter, createWeb
History } from 'vue-router';
import Dashboard from './views/Dashboard.vue';
import Login from './views/Login.vue';
const routes = [
{ path: '/login', component: Login },
{ path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
];
const router = createRouter({
history: createWeb
History(),
routes
});
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !localStorage.getItem('token')) {
next('/login');
} else {
next();
}
});
export default router;
```
---
#### 后端部分：Django REST Framework
结合 JWT 实现认证
后端使用 Django REST Framework（DRF）提供接口支持前端的登录需求。
1. **安装必要的包**
安装 `djangorestframework-simplejwt` 包以启用 JWT 认证功能。
```bash
pip install djangorestframework-simplejwt
```
2. **
设置 JWT 验证**
修改项目的 `settings.py` 文件，
添加如下内容：
```python
INSTALLED_APPS += ['rest_framework']
REST_FRAMEWORK = {
'DEFAULT_AUTHENTICATION_CLASSES': (
'rest_framework_simplejwt.authentication.JWTAuthentication',
),
}
SIMPLE_JWT = {
'ACCESS_TOKEN_LIFETIME': timedelta(minutes=5),
'REFRESH_TOKEN_LIFETIME': timedelta(days=1),
}
```
3. **定义 URL 路由**
在项目根目录下的 `urls.py` 文件中注册 JWT 相关视图函数。
```python
from rest_framework_simplejwt.views import TokenObtainPairView, TokenRefreshView
urlpatterns = [
path('api/token/', TokenObtainPairView.as_view(), name='token_obtain_pair'),
path('api/token/refresh/', TokenRefreshView.as_view(), name='token_refresh'),
]
```
4. **测试接口**
测试 `/api/token/` 接口是否能够成功返回 Access Token 和 Refresh Token[^4]。
---
#### 整体工作流
1. 用户在前端填写用户名和密码，并通过 `axios` 发起 POST 请求到后端的 `/api/token/` 接口。
2. 如果凭证有效，后端会生成一对 JWT Tokens 并将其作为响应数据返回给前端。
3. 前端接收到 Token 后，将其保存到浏览器的 LocalStorage 或
Cookie 中以便后续使用。
4. 对于需要身份验证的 API 请求，前端会在请求头中附加 Authorization 字段，格式为 `Bearer <access_token>`。
```javascript
const instance = axios.create({
baseURL: 'http://localhost:8000/api/',
headers: {
Authorization: `Bearer ${localStorage.getItem('token')}`
}
});
```
---
#### 注意事项
- 确保 Token 过期时间合理，建议配合刷新机制延长有效期。
- 加密传输敏感信息，推荐使用 HTTPS 协议。
- 处理异常情况，如 Token 无效或过期时提示重新登录。
---
本文指出在vue路由的history模式下，若不指定path，不同path无法共享cookie，实用办法是设置path为根目录。同时提供了cookie的常用方法，包括设置cookie、获取指定的cookie信息以及清除所有cookie。
扫一扫
2878
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
