第12天:前端集成与Django后端 - 用户认证与状态管理
目标
整合Django后端与Vue.js前端,实现用户认证和应用状态管理。
任务概览
- 设置Django后端用户认证。
- 创建Vue.js前端应用。
- 使用Vuex进行状态管理。
- 实现前端与后端的用户认证流程。
详细步骤
1. Django后端设置
确保Django后端具备用户认证和Token认证系统。
- 配置
REST_FRAMEWORK
在settings.py
中添加Token认证。
REST_FRAMEWORK = {
'DEFAULT_AUTHENTICATION_CLASSES': [
'rest_framework.authentication.TokenAuthentication',
],
}
- 创建用户认证相关的API端点(登录、登出、用户信息获取)。
2. Vue.js前端应用
使用Vue.js创建前端应用。
- 使用Vue CLI创建新项目。
- 设置Vue Router进行页面路由。
// Vue Router配置
const router = new VueRouter({
routes: [
{ path: '/login', component: Login },
{ path: '/home', component: Home, meta: { requiresAuth: true } },
// 其他路由...
],
});
3. Vuex状态管理
在Vue.js中使用Vuex管理应用状态。
- 安装Vuex并创建store。
npm install vuex@next --save
- 配置Vuex store。
// store/index.js
import { createStore } from 'vuex';
export default createStore({
state: {
isAuthenticated: false,
userData: null,
},
mutations: {
setAuthState(state, { isAuthenticated, userData }) {
state.isAuthenticated = isAuthenticated;
state.userData = userData;
},
},
actions: {
login({ commit }, credentials) {
// 实现登录逻辑
},
logout({ commit }) {
// 实现登出逻辑
},
},
});
4. 用户认证流程
实现前端登录和登出逻辑,与Django后端交互。
- 使用Fetch API与Django后端API通信。
// Vuex actions中实现登录
login({ commit }, credentials) {
fetch('/api/auth/login/', {
method: 'POST',
body: JSON.stringify(credentials),
headers: { 'Content-Type': 'application/json' },
})
.then(response => response.json())
.then(data => {
commit('setAuthState', { isAuthenticated: true, userData: data.user });
localStorage.setItem('authToken', data.token);
});
},
- 保护Vue路由,实现基于状态的导航守卫。
// Vue Router导航守卫
router.beforeEach((to, from, next) => {
const requiresAuth = to.matched.some(route => route.meta.requiresAuth);
const isAuthenticated = store.state.isAuthenticated;
if (requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});
学习要点
- Django后端用户认证系统的配置和使用。
- Vue.js前端应用的创建和Vue Router的使用。
- Vuex在状态管理中的应用。
- 前后端用户认证流程的实现。
每日回顾
- 确保Django后端API能够处理认证请求并返回正确的响应。
- 测试Vue.js前端是否能够正确处理用户登录和登出,以及状态的更新。
通过今天的学习,你应该能够实现一个基本的用户认证流程,并通过Vuex管理用户认证状态。明天,我们将继续深入Vue.js和Vuex,学习如何实现更复杂的数据交互和状态管理。