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

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

Mock.js

前端通过Mock.js模拟后端接口，待后端完成接口后，再连接后端服务进行联调并上线

先修改以下router/index.js，添加一个前置导航守卫，让登录成功与退出成功有明显的区别，登录成功时，在没有做状态管理之前，先将登录标识(定义为pm_token)存放在localStorage中，然后直接跳转到首页，退出成功时，localStorage的登录标识被清除，将跳转回登录页面

添加的代码如下：

安装mock.js

在package.js中能看到mokcjs的版本

mock.js提供一个数据生成API，即Mock.mock(rurl?,rtype?,template|function(options)),参数说明：

rurl:拦截的请求地址，可以是URL字符串或URL正则，也可为选配的参数

rtype:拦截的Ajax请求，GET，POST，DELETE，PUT

template|function(options):最后一个参数可以有两种形式：template为数据模板，可以是对象或字符串，function(options)为用于生成响应数据的函数，这个函数的一个参数指向本次请求的Ajax选项集，包含url，type，body三个属性

这个API可以演变出多个API

Mock.mock(template)

Mock.mock(rurl,template)

Mock.mock(rurl,function(options))

Mock.mock(rurl,rtype,template)

Mock.mock(rurl,rtype,function(options))

另外还可以通过Mock.setup(settings)这个API设置拦截请求的通用配置，目前支持的配置项仅有timeout，用于设置超时时间

检查Mock.js是否已经可以正常使用，在login/index.vue文件中加入如下代码：

再次输入符合登录规则的用户名和密码，单击’登录‘按钮，在localStorage中出现了pm_token的值

此时返回已经被正确的模拟了，但是没有任何打印日志，在network中也看不到请求发送的痕迹，这样不利于页面排错，因为需要将mock.js进行封装

一、Mock.js的封装

1、在src下创建一个mock文件夹，在mock文件夹下新建一个index.js入口文件

2、和Axios请求模拟一样，数据的模拟也区分不同模块，因此继续在src/mock下创建一个modules文件夹，用于存放不同模块的模拟函数

3、在src/mock/modules下创建一个login.js文件，写入登录相关的模拟函数

这个函数模拟登录成功的返回

4、在src/mock/index.js中引入Mock.js，并实现统一的模拟函数，所有模拟接口都可以通过调用这个函数进行数据模拟

因为仅在本地开发或者有需要的时候才进行数据模拟，因此可以通过定义开关来决定是调用后台接口还是使用Mock.js来进行模拟，可以配置的开关包括模拟所有模块开关，模拟单个模块开关以及模拟单个接口开关。例如登录模块，定义一个模拟函数名为Mock，模拟所有模块可以看作遍历所有模块，一一模拟单个模块。所以写入index.js的代码为：

最重要的模拟函数处理过程是遍历模块内的所有接口处理函数 for(var key in mod)这行，如果返回配置了isOpen为false，那么这个接口将直接调用后台，而不进行模拟，默认情况下，即不配置isOpen，或者返回了isOpen为true，将根据mock函数处理返回

• 处理请求地址：为了写法简便，在模块模拟返回函数中可以直接省略baseURL，通过index.js入口模拟函数统一添加基地址baseURL
• 处理当前Ajax请求body:Mock.mock(rurl,rtype,function(options))最后一个参数是一个函数，函数的形参options有个body属性值，代表请求体，通常是一些请求参数，因为是一个JSON字符串，需要转换成JSON才方便读取对应参数值，而在模块返回模板中，读取这个对应参数值是比较常用的操作，所以为方便各模块读取，这里需要进行JSON转换的统一处理，并赋值给一个新的参数data
• 调用Mock.mock(rurl,rtype,function(options))处理各模块模拟函数，执行后返回结果对象的response属性，这个属性的值可以是一个对象或字符串，也可以是一个函数，这个函数可以传入本次请求的Ajax选项集，即Mock.mock(rurl,rtype,function(options))最后一个参数function（options）的形参options，从而在response中对本次请求的相关参数进行处理，根据不同参数返回不同的模拟数据
• 考虑到模块返回对象的返回函数的处理结果即为模拟的最终数据，如果可以继续通过调用Mock.mock(template)进行模拟，那么可以在返回函数中继续使用Mock.js语法来随机生成对应的数据，对于模拟随机数据非常方便，所以最后Mock.mock(rurl,rtype,function(options))的最后一个参数function(options)函数返回之前，再次调用Mock.mock(template)返回最终的模拟数据
• 最后打印请求选项集和最终的返回数据

最后，通过调用mockAll(modules,isOpen)方法将登录模块放入数组中传入，模拟所有的接口开关是openMock，可以根据需要设置true(开启)或false(关闭)，或者直接调用mock(modules,isOpen)方法传入登录模块，以及单个模块开关是否开启的值

至此，Mock.js封装完成，只需要在入口文件src/main.js中引入上面的入口文件即可

然后打开登录页面，同时在console中可以看到Mock的数据打印

为了测试方便，可以设置系统的默认用户信息，将默认的用户信息写入/src/mock/data.js文件中

同时修改src/mock/modules/login.js的response方法

这样如果使用的是默认的账户则正常跳转，否则会提示用户名和密码错误

用admin/admin登录

成功进入首页