vue-admin-template搭建后台管理系统的学习(二)登录

此模版 用到的是mock模拟数据,在store中管理用户状态

我们一步步改为我们自己想要的东西 即 在实际项目中我们是怎么实现登录的

1.我们先找到这个登录页

 vue-admin-template搭建后台管理系统的学习(二)登录_第1张图片

打开这个登录页在点击登录的时候有一个方法

 vue-admin-template搭建后台管理系统的学习(二)登录_第2张图片

 

上面的图中 红框 部分 标记的意思是 在store文件中找到user文件中的login方法

vue-admin-template搭建后台管理系统的学习(二)登录_第3张图片

 

 

 找到了这里就是处理登录的地方  我们往下看 会看到一个Login方法

 

两个login 第一个是在store=>user中定义的方法用于将用户的状态存起来,第二个 就是我们的 请求了 看到这个就很熟悉来吧。 我们接着找  这个Login请求在这里导入的store=>user文件的开头。如下图:

 

 

 这个Login在api=>user  如下图:

vue-admin-template搭建后台管理系统的学习(二)登录_第4张图片

 

找到了 这个方法 我们又看到了$http 接着找 打开utils=>http(这里的http文件是基于axios封装的request请求,在基础模版中也进行了封装,根据自己的需求来封装,)

我们在打开httpt文件找到$http

 

 就是封装的一个http请求,我的主要有 对请求的拦截 给每个请求赛入token 以及 响应拦截器 对于返回的code做处理

到这里我们就找到了 登录用到的整个方法 下面 修改 配置

我们先找到 vue.config.js 

vue-admin-template搭建后台管理系统的学习(二)登录_第5张图片

 

 把标记的地方去掉(意思是用的们mock中的数据,这里我们用实际数据,所以不要,关于这个mock文件 你可以删掉,当然你可以配置本地环境也可以用mock,两种可以切换,网上可以查查)

在找到

 

 这两个文件 development —开发环境 production—生产环境

把这 development 文件VUE_APP_BASE_API

vue-admin-template搭建后台管理系统的学习(二)登录_第6张图片

 

改为你真实的接口请求地址(域名或IP)

在看回 上文提到的 api=>user

 

 这里只用填 你接口的路径

 VUE_APP_BASE_API这个可以根据不同的环境来切换 地址

 到这里 登录的功能 算是实现了 其实这里可以登录完成后 获取用户的基本权限来生成路由表 以实现动态路由

 

你可能感兴趣的:(vue-admin-template搭建后台管理系统的学习(二)登录)