登陆接口模拟调试

偏执的太偏执、 2021-07-24 14:28 529阅读 0赞

# 一 前端登录问题 #

默认情况下，前端项目已经实现了登录功能，后端连接到远程Mock平台的模拟数据接口进行登录，而Mock平台地址无效，导致前端的登录功能无法执行。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

# 二 Mock登录接口 #

我们暂时将请求切换到本地Mock数据的接口中，使系统可以进行模拟登录，以便进行后续的开发工作。

## 1 修改前端接口配置 ##

在 config/dev.env.js 中修改BASE\_API

> 注意：这个文件修改后需要重启前端服务器

BASE_API: '"http://127.0.0.1:8110"'

## 2 前端登录接口文件 ##

src/api/login.js，可以在这个文件中分析后端Mock数据的接口的url地址：

*  登录：/user/login
 *  登出：/user/info
 *  获取用户信息：/user/logout

import request from '@/utils/request'
    // 登陆
    export function login(username, password) {
      return request({
        url: '/user/login',
        method: 'post',
        data: {
          username,
          password
        }
      })
    }
    // 登出
    export function getInfo(token) {
      return request({
        url: '/user/info',
        method: 'get',
        params: { token }
      })
    }
    // 获取用户信息
    export function logout() {
      return request({
        url: '/user/logout',
        method: 'post'
      })
    }

# 三 后端接口文件 #

暂时在service\_edu微服务中创建LoginController，模拟上面三个接口

// 跨域
    @CrossOrigin
    @RestController
    @RequestMapping("/user")
    public class LoginController {
        /**
         * 登录
         * @return
         */
        @PostMapping("login")
        public R login(){
            return R.ok().data("token", "admin");
        }
        /**
         * 获取用户信息
         * @return
         */
        @GetMapping("info")
        public R info(){
            return R.ok()
                    .data("name", "admin")
                    .data("roles", "[admin]")
                    .data("avatar", "https://oss.aliyuncs.com/aliyun_id_photo_bucket/default_handsome.jpg");
        }
        /**
         * 退出
         * @return
         */
        @PostMapping("logout")
        public R logout(){
            return R.ok();
        }
    }

# 四 测试 #

1 登陆后的样子

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][]

2 登出也可以成功

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/e7feae50818c4e92aab1b9fc6b01451f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: /images/20210724/63c2f2a6d13149faafe026ec206e0923.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2]: /images/20210724/4d641a9c3ce84385bb137b17d370627e.png