zoukankan      html  css  js  c++  java
  • vue-admin-template搭建后台管理系统的学习(二)登录

    此模版 用到的是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这个可以根据不同的环境来切换 地址

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

  • 相关阅读:
    v-model
    CSS background 属性
    渐变背景
    mint ui的field用法和修改样式的方法
    js 数组包含
    password 密码查询
    web 单一平台登录逻辑
    内存共享锁业务逻辑(原创)
    无限分类树操作
    根据日期获取,x岁x月x天
  • 原文地址:https://www.cnblogs.com/pengBoRan/p/13172016.html
Copyright © 2011-2022 走看看