PHP 前后端交互 获取AUTHORIZATION认证

### FastAdmin 前后端联调方法与教程 #### 一、前后端分离架构下的联调基础 FastAdmin 是基于 ThinkPHP 和 Vue.js 的快速开发框架，支持前后端分离模式。为了实现高效的联调，需确保前端和后端能够通过 API 进行数据交互。 1. **API 接口设计** 后端应提供清晰的 RESTful 风格接口文档[^1]，包括请求路径、参数说明以及返回值结构。例如： - 请求地址：`/api/user/list` - 请求方式：GET - 参数列表：`page=1&limit=10` - 返回示例： ```json { "code": 0, "msg": "", "data": [ {"id": 1, "name": "张三"}, {"id": 2, "name": "李四"} ] } ``` 2. **跨域问题处理** 如果前端和后端部署在不同的服务器上，则需要解决 CORS 跨域问题。可以在 Nginx 或 Apache 中设置允许跨域访问的头信息[^1]，或者在 PHP 文件中加入如下代码： ```php header('Access-Control-Allow-Origin: *'); header('Access-Control-Allow-Methods: GET, POST, OPTIONS'); header('Access-Control-Allow-Headers: Content-Type, Authorization'); ``` 3. **Mock 数据调试** 在实际接口未完成前，可以利用 Mock 工具模拟接口响应数据。推荐工具如 `mockjs` 或 Postman 的 Mock 功能[^4]。 --- #### 二、具体联调步骤 1. **启动服务** - 启动 WAMP/XAMPP 等集成环境，确保 MySQL 和 PHP 正常运行[^1]。 - 使用 HBuilderX 编译并预览前端项目，确认无编译错误[^2]。 2. **配置代理** 若本地开发时存在跨域问题，可在前端项目的 `vue.config.js` 中添加代理配置： ```javascript devServer: { proxy: { '/api': { target: 'http://localhost', // 替换为后端服务的实际地址 changeOrigin: true, pathRewrite: { '^/api': '' } } } } ``` 3. **发送 HTTP 请求** 利用 Axios 库发起网络请求，并捕获异常情况。以下是获取用户列表的示例代码： ```javascript import axios from 'axios'; const getUserList = async () => { try { const response = await axios.get('/api/user/list?limit=10&page=1'); console.log(response.data); } catch (error) { console.error(error.message); } }; export default getUserList; ``` 4. **验证接口返回** 将后端返回的数据绑定至前端组件中显示。例如，在 `<template>` 中渲染表格内容： ```html <el-table :data="tableData"> <el-table-column prop="id" label="ID"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> </el-table> ``` 5. **日志排查** 当遇到接口调用失败的情况时，可通过浏览器开发者工具查看 Network 面板中的请求详情，定位问题所在[^3]。 --- #### 三、常见问题及其解决方案 1. **无法找到模块** 如报错提示 “Cannot find module”，可能是由于某些依赖包缺失所致。尝试执行以下命令重新安装依赖项： ```bash npm install --save-dev node-sass ``` 并调整 PowerShell 执行策略以修复潜在权限问题[^2]: ```powershell Set-ExecutionPolicy RemoteSigned Get-ExecutionPolicy ``` 2. **Token 认证失效** 如果接口返回状态码为 401（Unauthorized），则可能是因为 Token 失效或未传递认证信息。建议检查登录逻辑是否正确存储了用户的 Token，并将其附加到每次请求头部： ```javascript axios.interceptors.request.use(config => { config.headers.Authorization = localStorage.getItem('token'); return config; }); ``` 3. **数据库连接超时** 修改 `config/database.php` 文件内的链接池大小或其他性能优化选项。 --- ### 总结 以上介绍了 FastAdmin 前后端联调的核心要点，涵盖了 API 设计、跨域处理、Mock 测试等多个方面。遵循这些原则可有效提升开发效率并减少不必要的沟通成本。