第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.jsimport { 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();}
});