Vue3 Axios: 添加响应头，存储 Token，实现分权跳转和鉴权

在Vue3中使用axios发送请求，并添加响应头、存储token值、实现分权跳转和鉴权，可以按照以下步骤进行操作：\n\n1. 安装axios和vue-router：在项目根目录下运行以下命令安装依赖：\n\n\nnpm install axios vue-router\n\n\n2. 创建一个axios实例并设置默认的请求头：\n在项目的src目录下创建一个api文件夹，并在该文件夹下创建一个http.js文件，用于创建axios实例。\n\njavascript\n// src/api/http.js\nimport axios from 'axios';\n\nconst http = axios.create({\n baseURL: 'http://your-api-url.com', // 设置请求的基础URL\n timeout: 5000 // 设置请求超时时间\n});\n\nhttp.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token'); // 设置默认请求头，存储token值\n\nexport default http;\n\n\n3. 使用axios发送请求：\n在需要发送请求的组件中，引入http.js文件，并使用http实例发送请求。\n\njavascript\n// src/views/Example.vue\n<template>\n <div>\n <button @click="getData">发送请求</button>\n </div>\n</template>\n\n<script>\nimport http from '@/api/http';\n\nexport default {\n methods: {\n getData() {\n http.get('/data')\n .then(response => {\n console.log(response.data);\n })\n .catch(error => {\n console.log(error);\n });\n }\n }\n};\n</script>\n\n\n4. 实现分权跳转和鉴权：\n在需要进行分权跳转和鉴权的路由配置文件中，对需要进行鉴权的路由进行配置。\n\njavascript\n// src/router/index.js\nimport { createRouter, createWebHashHistory } from 'vue-router';\n\nconst routes = [\n {\n path: '/home',\n name: 'Home',\n component: () => import('@/views/Home.vue')\n },\n {\n path: '/admin',\n name: 'Admin',\n component: () => import('@/views/Admin.vue'),\n meta: { requiresAuth: true } // 设置需要鉴权的路由\n }\n];\n\nconst router = createRouter({\n history: createWebHashHistory(),\n routes\n});\n\nrouter.beforeEach((to, from, next) => {\n const token = localStorage.getItem('token');\n \n if (to.meta.requiresAuth && !token) {\n // 需要鉴权的路由且未登录，跳转到登录页面\n next('/login');\n } else if (!to.meta.requiresAuth && token) {\n // 不需要鉴权的路由且已登录，跳转到首页\n next('/home');\n } else {\n next();\n }\n});\n\nexport default router;\n\n\n这样就完成了在Vue3中使用axios发送请求，并添加响应头、存储token值、实现分权跳转和鉴权的操作。需要注意的是，以上代码仅为示例，具体的业务逻辑可能需要根据实际情况进行调整。