⼿把⼿教你⽤vue-clic3搭建vue-element-admin项⽬1. 下载element-admin框架
点击该地址：
⽤git clone 或者直接下载压缩包都可以
2.安装依赖
打开项⽬根⽬录，在根⽬录下使⽤npm install 安装依赖，这种⽅式可能耗时较长，可采⽤镜像安装npm install --registry=registry.。在这⾥我⽤webstorm做开发⼯具演⽰。
安装完成后，会在此⽣成⼀个依赖⽂件夹
3.修改配置
最新版本⽣成的项⽬的配置⽂件没有了config⽂件夹，配置⽂件主要放在了fig.js⾥⾯，简单介绍⼀下重点的配置：vue element admin
现在打开fig.js修改⾥⾯的配置
现在后台接⼝修改完成，那么如何登陆成功呢？接下来到view->login->index.vue到登录⽅法，可以看到在该⽅法⾥调⽤了store⾥⾯的login⽅法，
再来，到store->modules->user.js⽂件，到login⽅法，可以看到在⽅法⾥⾯调⽤了login接⼝，按住ctrl键点击login会跳转到该接⼝的⽂件
在这⾥可以看到请求登录接⼝是⽤的⼀个封装好的request请求，该⽂件⾥⾯包含了请求拦截和响应拦截，现在我们打开这个request⽂件看⼀下⾥⾯的逻辑。
拦截请求，先判断store⾥⾯是否有token，如果没有直接返回原config对象，login接⼝请求拦截解除，继续调接⼝，接⼝请求成功后，回
到store的login⽅法⾥⾯⾛then，将获取到的response展开处理，给store的state设置token值（以便后期请求拦截时从store中直接获取token进⽽来判断是否要在header中添加‘X-Token’验证。为什么不直接⽤cookie中的token呢？这个问题在官⽹中有讲解过，在这顺便简单介绍⼀下：如果在A台电脑上登录了，在B台电脑上也登陆，同时，在B台电脑上修改了个⼈信息，此时A台电脑的⽤户信息是从缓存中取出来的，所以仍然是修改之前的信息，除⾮退出登录），同时给cookie中的'Admin-Token’设值。紧接着store的login⽅法结束之后回到index.vue的登录⽅法，然后开始路由跳转。路由跳转也添加了拦截，在该拦截⾥，会根据缓存中的token去判断，如果有token且路由是/login，直接放⾏，如果没有token，在⽩名单⾥直接跳，不在⽩名单⾥调到登录页，如果有token且不是/login则去store⾥获得⾓⾊信息

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。