vue-element-admin实现登录(解决跨域问题)

利用vue-element-admin模板，实现登录过程

• • 一 下拉克隆项目 i18分支这里不再赘述，如有需要可以看我的另一篇博客
  • 二 运行登录抓包分析
  • 三 解决跨域问题
  • • 1.在`.env.development`定义一个变量，这样方便后期维护
    • 2.修改`vue.config.js`文件实现跨域
  • 四 编写请求接口js文件

一 下拉克隆项目 i18分支这里不再赘述，如有需要可以看我的另一篇博客

https://blog.csdn.net/weixin_44153063/article/details/113737440

二 运行登录抓包分析

登录抓包发现登录大致需要两个后台接口,过程不再赘述，如有需要请看

主要就是组织返回数据的结构同规定的一致

后台接口

@CrossOrigin
    @RequestMapping(value = "/api/user/login")
    @ResponseBody
    public Map login() {
        HashMap<String, Object> response = new HashMap<>();
        HashMap<String, Object> responseData = new HashMap<>();
        responseData.put("token","editor-token");
        response.put("code",20000);
//        response.put("msg","登录成功");
        response.put("data",responseData);
        log.info(response.toString());
        return response;
    }

    @CrossOrigin
    @RequestMapping(value = "/api/template/user/info")
    @ResponseBody
    public Map info(@RequestParam("token") String token) {
        log.info(token);
        HashMap<String, Object> responseInfo = new HashMap<>();
        HashMap<String, Object> responseData = new HashMap<>();
        if(token.equals("admin-token")){
            String[] roles = new String[1];
            roles[0] = "admin";
            responseData.put("roles",roles);
            responseData.put("introduction","I am a super administrator");
            responseData.put("avatar","https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
            responseData.put("name","Super admin");
            responseInfo.put("code",20000);
            responseInfo.put("data",responseData);
            log.info(JSONObject.toJSONString(responseInfo));
        } else if(token.equals("editor-token")){
            String[] roles = new String[1];
            roles[0] = "editor";
            responseData.put("roles",roles);
            responseData.put("introduction","I am an editor");
            responseData.put("avatar","https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
            responseData.put("name","Normal Editor");
            responseInfo.put("code",20000);
            responseInfo.put("data",responseData);
            log.info(JSONObject.toJSONString(responseInfo));
        }
        return responseInfo;
    }

           

三 解决跨域问题

1.在

.env.development

定义一个变量，这样方便后期维护

我们的后台本地地址端口为8080, 这里根据情况自行更改

BACKGROUND_APPLICATION_URL = 'http://localhost:8080'
           

2.修改

vue.config.js

文件实现跨域

注释掉

before: require('./mock/mock-server.js')

如下图

proxy: {
      '/api': {
        target: process.env.BACKGROUND_APPLICATION_URL,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
           

为什么这样写可以看我的另一篇博客https://blog.csdn.net/weixin_44153063/article/details/115602933

四 编写请求接口js文件

后台接口地址为

/api/user/login

、

/api/template/user/info

修改

@/api/user.js

如下

export function login(data) {
  return request({
    url: '/api/user/login',
    method: 'post',
    params: data
  })
}

export function getInfo(token) {
  return request({
    url: '/api/template/user/info',
    method: 'get',
    params: { token }
  })
}