vue-element-template基础模板对接后台

vue-element-template修改接口对接后台

1.情况说明：

本教程是在vue-element-template基础上，参考vue-element-admin进行编写说明。
官网：https://panjiachen.github.io/vue-element-admin-site/zh/

2.登录流程：

当用户填写完账号和密码后向服务端验证是否正确，验证通过之后，服务端会返回一个token，拿到token之后（我会将这个token存贮到cookie中，保证刷新页面后能记住用户登录状态），前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息（如用户权限，用户名等等信息）。

3.返回的数据：

login接口

{"code":20000,"data":{"token":"后端生成的token"}}

getInfo接口

{"code":20000,"data":{"roles":["admin"],"introduction":"I am a superadministrator","avatar":"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif","name":"Super Admin"}}

4.操作步骤：

（一）修改.env.development配置文件

（二）修改main.js如图注释掉

（三）修改vue.config.js文件

proxy: {
  // change xxx-api/login => mock/login
  // detail: https://cli.vuejs.org/config/#devserver-proxy
  [process.env.VUE_APP_BASE_API]: {
    target: `http://localhost:8080/`,        //修改后台接口地址
    changeOrigin: true,
    pathRewrite: {
      ['^'+process.env.VUE_APP_BASE_API]: ''
    }
  }
}

（四）修改api接口

（五）request.js可根据业务逻辑来改动，这里我没有改


（六）views/login/index


（七）src/store/modules/user.js

（八）路由守卫src/permission.js 路由 src/router/index.js 解决动态路由刷新页面404


（九）后台



（十）测试

这个文档是前端鉴权，过两天会再发一篇后端鉴权的文章