Vue3 Axios登录拦截
在前端开发中，经常会遇到需要用户登录才能访问某些页面或接口的情况。为了实现这个功能，我们可以使用Vue3和Axios来进行登录拦截。本文将介绍如何使用Vue3和Axios来实现登录拦截的功能，并提供示例代码。
什么是登录拦截
登录拦截是指在用户访问需要登录的页面或接口时，先检查用户是否已登录，如果没有登录，则跳转到登录页面；如果已登录，则继续访问所需页面或接口。
Vue3简介
Vue3是一种用于构建用户界面的渐进式JavaScript框架。它具有简单易学、高效灵活、响应式和组件化等特点，被广泛应用于前端开发中。
Axios简介
Axios是一个基于Promise的HTTP客户端，可以在浏览器和Node.js中发起HTTP请求。它具有易于使用、支持所有现代浏览器和Node.js、支持异步请求和拦截请求等特点，是一个非常流行的HTTP请求库。
实现登录拦截的步骤
- 在Vue3项目中安装Axios
首先，我们需要在Vue3项目中安装Axios。可以使用如下命令来安装Axios：
npm install axios
- 创建Axios拦截器
在Vue3项目的入口文件（通常是main.js）中，我们可以创建Axios拦截器来处理登录拦截逻辑。首先，导入Axios和Vue：
import axios from 'axios'
import { createApp } from 'vue'
然后，创建一个Axios实例，并添加请求拦截器：
const app = createApp(App)
app.config.globalProperties.$http = axios
// 请求拦截器
axios.interceptors.request.use(
(config) => {
// 在发送请求之前进行逻辑处理
// 检查用户是否已登录
const token = localStorage.getItem('token')
if (token) {
// 如果已登录，则在请求头中添加token
config.headers.Authorization = `Bearer ${token}`
} else {
// 如果未登录，则跳转到登录页面
router.push('/login')
}
return config
},
(error) => {
return Promise.reject(error)
}
)
接下来，添加响应拦截器：
// 响应拦截器
axios.interceptors.response.use(
(response) => {
// 在接收响应之前进行逻辑处理
return response
},
(error) => {
// 处理请求错误
if (error.response.status === 401) {
// 如果返回状态码为401，则跳转到登录页面
router.push('/login')
}
return Promise.reject(error)
}
)
在以上代码中，我们通过拦截器来检查用户是否已登录。如果用户已登录，则在请求头中添加token；如果用户未登录，则跳转到登录页面。
- 使用Axios发送请求
现在，我们可以在Vue3组件中使用Axios来发送请求了。例如，我们可以在登录组件中发送登录请求：
methods: {
login() {
axios.post('/api/login', { username: this.username, password: this.password })
.then((response) => {
// 处理登录成功的逻辑
localStorage.setItem('token', response.data.token)
// 跳转到用户首页
router.push('/home')
})
.catch((error) => {
// 处理登录失败的逻辑
console.log(error)
})
}
}
在以上代码中，我们使用Axios的post方法来发送登录请求，并在登录成功后将token保存到本地存储中。
示例代码
以下是一个使用Vue3和Axios实现登录拦截的示例代码：
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
const app = createApp(App)
app.config.globalProperties.$http = axios
axios.interceptors.request.use(
(config) => {
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
} else {
router.push('/login')
}
