登录url的改造的分析过程

启动前端的demo项目。浏览器右键选择inspect打开调试界面，切到Network,点击Login，具体操作参考下图。

可以看到前端访问的url。我们把它改造成后端的8001端口访问的页面。

打开src/api/login.js。

import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/vue-admin-template/user/login',
    method: 'post',
    data
  })
}

这里返回的request是导入的/utils/request。点进去看看。原来是axios的Ajax请求。里面的baseURL是什么？

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api 的 base_url
  timeout: 5000 // 请求超时时间
})

config/dev.env.js中配置了baseURL。

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"',
})

将其改为本地8001.

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_API: '"http://localhost:8001"',
})

注意到前端的login.js中有两个方法，login()方法和info()方法，分别用于登录和获取登录信息，因此后端也需要开放两个接口。在src/store/modules下的user.js可以看到用户的信息。包括name,role，avatar,token，前三个参数需要后端info()提供,token由login()提供。