vue3+elementplus+ts搭建权限管理系统--5

*****************此文仅用于个人记录学习vite创建vue3项目过程，请勿转载或转发******************

1、登录页面和404页面

封装Axios

执行yarn add axios的时候报错：

这个错误是由于你的系统执行策略（Execution Policies）禁止运行脚本导致的

解决方法

安装成功后在package.json文件中能看到axios的版本信息

1、统一请求配置

        在src下创建一个request文件夹，然后在文件夹下创建一个config.js文件，将Axios通用配置写入文件中

 

2、统一API请求

通过axios.create创建一个Axios实例

3、添加请求拦截器

设置请求头需要带token，如果没有token则跳回登录页面，如果请求超时，则提示请求超时

4、添加相应拦截器

进行统一错误处理

5、处理正确返回了结果的数据

正确返回结果时，统一返回格式为JSON，包含code,msg,data

code表示成功标识，200为成功，如果不是200则失败，-1表示正常的失败行为，-2表示登录失效需要跳回登录页面，失败时通常会返回错误原因msg

添加中英文翻译

en.js文件中添加如下内容：

修改src/views/login/index.vue文件，完善登录页面

并且将接口信息统一管理，放到src/apis/login文件夹下

添加国际化

zh.js添加内容：

en.js添加内容：

至此登录页面完成，进入登录页面可以输入符合正则表达式的数据，单击登录按钮查看接口是否被调用

会提示Network Error，因为没有对应的后台服务