vueaxios一个项目学会前端实现登录拦截

在本文中，我们将深入探讨如何使用Vue.js框架和axios库来构建一个完整的前端登录系统，包括登录、拦截、登出功能。Vue.js是现代前端开发中的一个流行选择，它提供了组件化、虚拟DOM和响应式数据绑定等特性，极大地提高了开发效率。axios则是一个基于Promise的HTTP库，用于处理网络请求，广泛应用于Vue项目中。 让我们从创建Vue项目开始。Vue全家桶通常包括Vue.js、Vuex（状态管理）、Vue Router（路由管理）以及Vue CLI（命令行工具）。Vue CLI可以快速初始化一个新项目，并自动配置好必要的依赖。 1. **安装Vue CLI**：确保全局安装了Node.js环境，然后通过npm或yarn安装Vue CLI： ``` npm install -g @vue/cli yarn global add @vue/cli ``` 2. **创建项目**：使用Vue CLI创建名为"vue-login"的新项目： ``` vue create vue-login ``` 3. **选择预设**：可以选择默认预设或者自定义配置，这里我们选择默认预设。 4. **安装axios**：在项目中安装axios： ``` npm install axios yarn add axios ``` 接下来，我们将重点讨论如何实现登录功能。Vue组件化设计允许我们将登录界面封装为一个独立的组件。创建一个名为`Login.vue`的文件，包含输入框、登录按钮以及登录逻辑。 1. **创建登录组件**：在`src/components`目录下创建`Login.vue`，添加用户名和密码输入框，以及登录按钮，使用v-model绑定数据。 2. **实现登录逻辑**：在组件的`methods`中，当用户点击登录按钮时，调用axios发送POST请求到后端服务器进行登录验证。 3. **使用axios发送请求**：例如： ```javascript methods: { async login() { const response = await axios.post('/api/login', { username: this.username, password: this.password }); if (response.data.success) { // 登录成功逻辑 } else { // 错误提示 } }, }, ``` 这里`/api/login`是后端提供的登录接口，`username`和`password`是用户输入的数据。 为了实现登录拦截，我们可以利用axios的http拦截器。拦截器允许我们在请求发送之前和响应返回之后执行一些操作。 1. **配置axios拦截器**：在`main.js`文件中，添加以下代码： ```javascript import axios from 'axios'; axios.interceptors.request.use(config => { // 在请求发送前，检查是否已登录 if (/* 判断用户是否已登录的条件 */) { config.headers.Authorization = 'Bearer ' + localStorage.getItem('token'); } return config; }, error => Promise.reject(error)); axios.interceptors.response.use(response => response, error => { // 如果收到401错误，表示未授权，跳转到登录页 if (error.response.status === 401) { router.push('/login'); } return Promise.reject(error); }); ``` 这里的`Authorization`头用于携带用户认证信息，`localStorage.getItem('token')`用于获取本地存储的用户令牌。 实现登出功能。用户点击登出按钮时，清除本地存储的用户信息，并重定向到登录页面。 1. **创建登出组件**：在`components`目录下创建`Logout.vue`，添加登出按钮。 2. **实现登出逻辑**：在组件的`methods`中，清除本地存储的用户信息并重定向。 ```javascript methods: { logout() { localStorage.removeItem('token'); router.push('/login'); }, }, ``` 总结，通过Vue全家桶结合axios，我们可以创建一个完整的前端登录系统，包括登录验证、登录拦截和登出功能。Vue.js提供了强大的组件化开发方式，axios则简化了网络请求处理。通过设置axios的拦截器，我们可以在请求发送前添加认证信息，并在接收到未授权响应时自动处理。