vue3 axios 全局加载token

对于 Vue3 项目中的路由加载，可以使用 Vue Router 4.x 版本，并结合 Axios 进行实现。 首先，在项目中安装 Vue Router 和 Axios： ```bash npm install vue-router axios ``` 然后，在 Vue3 项目中，可以在 main.js 中进行配置： ```js import { createApp } from 'vue' import App from './App.vue' import router from './router' import axios from 'axios' const app = createApp(App) app.use(router) // 设置 Axios 的基础配置 axios.defaults.baseURL = 'https://api.example.com' axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token') // 在 Vue3 中，可以通过 app.config.globalProperties.$axios 访问 Axios 实例 app.config.globalProperties.$axios = axios app.mount('#app') ``` 在上述代码中，通过 `app.config.globalProperties.$axios` 将 Axios 实例挂载到全局变量中，方便在组件中进行使用。 接下来，在路由配置中，可以使用 Axios 进行路由加载： ```js import { createRouter, createWebHistory } from 'vue-router' import axios from 'axios' const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', name: 'Home', component: () => import('@/views/Home.vue'), meta: { requiresAuth: true } }, { path: '/login', name: 'Login', component: () => import('@/views/Login.vue') } ] }) // 路由加载前，判断路由是否需要进行身份验证 router.beforeEach((to, from, next) => { if (to.meta.requiresAuth) { axios.get('/api/user') .then(response => { if (response.status === 200) { next() } else { next('/login') } }) .catch(() => { next('/login') }) } else { next() } }) export default router ``` 在上述代码中，通过 `beforeEach` 钩子函数，在路由加载前进行身份验证。如果路由需要进行身份验证，则发送一个 GET 请求到 `/api/user` 接口进行验证，如果验证成功，则加载路由，否则跳转到登录页面。 需要注意的是，在实际开发中，需要根据实际情况进行路由加载和身份验证的处理。

### Vue3 使用 Axios 获取 Token 的示例 在 Vue3 项目中使用 Axios 获取 Token 主要涉及配置 Axios 实例以及处理认证逻辑。以下是具体实现方式： #### 创建 Axios 实例 为了更好地管理 HTTP 请求，建议创建一个独立的 Axios 实例来设置默认参数和其他全局配置。 ```javascript // request/index.js import axios from 'axios'; const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // API base_url timeout: 5000 // Request timeout }); export default service; ``` 此代码片段展示了如何初始化带有基础 URL 和超时时间的 Axios 客户端实例[^4]。 #### 登录接口定义 接下来定义用于登录操作的具体函数，该函数会向服务器发送用户名和密码，并接收返回的 Token 数据。 ```typescript // apis/user.ts import service from '@/request/index'; interface ILoginData { username: string, password: string } export function login(data: ILoginData) { return service({ url: '/login', // 替换成实际API路径 method: 'POST', data // 发送的数据体 }); } ``` 这段 TypeScript 代码描述了一个名为 `login` 的异步函数，它接受用户凭证作为输入并通过 POST 请求将其提交给指定的服务端点以换取访问令牌。 #### 存储与应用 Token 一旦成功获得 Token 后，则需妥善保存以便后续请求携带身份验证信息。通常做法是在本地存储 (localStorage 或 sessionStorage)，并在每次发起新请求前自动附加 Authorization 头部字段。 ```javascript // utils/auth.ts import { localStorage } from '@vueuse/core' function setToken(token:string){ window.localStorage.setItem('token', token); } function getToken(){ return window.localStorage.getItem('token'); } export {setToken,getToken}; ``` 上述 JavaScript 函数提供了两个工具方法：一个是用来把接收到的新 Token 放入浏览器缓存；另一个是从那里读取现有记录供其他组件调用[^1]. #### 自动附带 Token 到请求头 为了让所有发出的请求都包含有效的授权凭据，可以在 Axios 拦截器里做统一处理。 ```javascript // request/index.js 继续... service.interceptors.request.use( config => { const token = getToken(); if (token) { config.headers['Authorization'] = `Bearer ${token}`; } return config; }, error => Promise.reject(error) ); export default service; ``` 这里修改了之前创建好的 Axios 实例对象，在其请求拦截链上加入了一段逻辑，确保每一次对外通信都会带上当前用户的鉴权标志——即 Bearer 类型下的 Access Token[^3]. #### 调用 Login 并处理响应 最后一步就是在适当的地方触发这个流程，比如在一个表单提交事件处理器内部完成整个过程。 ```html <template> <!-- ... --> </template> <script setup lang="ts"> import { ref } from 'vue' import { useRouter } from 'vue-router' import { useStore } from '../store' import { login as loginUser } from '@/apis/user' import { setToken } from '@/utils/auth' const router = useRouter() const store = useStore() async function handleLogin() { try { let res = await loginUser({username:'admin',password:'123'}) console.log(res.data.token); // 打印出服务端返回的结果中的 token 字段 setToken(res.data.token); // 将获取到的 token 设置进 storage 中去 router.push('/dashboard'); // 成功后跳转至仪表盘页面或其他受保护路由 } catch(err){ alert(`登录失败:${err.message}`); // 如果发生错误则给出提示信息 } } </script> ``` 以上模板部分省略不显，重点在于脚本标签内的业务逻辑编写。当点击按钮或者其他交互行为激活 `handleLogin()` 方法执行时，便会依照既定顺序依次尝试连接远程主机、解析 JSON 格式的回复内容并将其中的关键数据项提取出来加以利用[^2].