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

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

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

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

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

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

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

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

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

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

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

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

我们先找到 vue.config.js

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

在找到

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

把这 development 文件VUE_APP_BASE_API

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

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

这里只用填 你接口的路径

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

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

GitHub 加速计划 / vu / vue-admin-template
19.82 K
7.39 K
下载
PanJiaChen/vue-admin-template: 基于 Vue.js 和 Element UI 的后台管理系统模板,支持多语言、主题和布局切换。该项目提供了一个完整的后台管理系统模板,可以方便地实现后台管理系统的快速搭建和定制,同时支持多种数据源和插件扩展。
最近提交(Master分支:24 天前 )
4c18a3f4 - 2 年前
714ded11 - 3 年前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐