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

快来打我* 2022-11-18 01:41 134阅读 0赞

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

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

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

[https://blog.csdn.net/weixin\_44153063/article/details/113737440][https_blog.csdn.net_weixin_44153063_article_details_113737440]

## 二 运行登录抓包分析 ##

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

https://blog.csdn.net/weixin_43764814/article/details/101315585

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

@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, 这里根据情况自行更改  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE1MzA2Mw_size_16_color_FFFFFF_t_70]

BACKGROUND_APPLICATION_URL = 'http://localhost:8080'

### 2.修改`vue.config.js`文件实现跨域 ###

注释掉`before: require('./mock/mock-server.js')`如下图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE1MzA2Mw_size_16_color_FFFFFF_t_70 1]

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

为什么这样写可以看我的另一篇博客[https://blog.csdn.net/weixin\_44153063/article/details/115602933][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 }
      })
    }

[https_blog.csdn.net_weixin_44153063_article_details_113737440]: https://blog.csdn.net/weixin_44153063/article/details/113737440
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE1MzA2Mw_size_16_color_FFFFFF_t_70]: /images/20221022/b69cf08fd8354286a825a423377186cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE1MzA2Mw_size_16_color_FFFFFF_t_70 1]: /images/20221022/7d15ed1184b44cc69cd6e4e63bd2c280.png
[https_blog.csdn.net_weixin_44153063_article_details_115602933]: https://blog.csdn.net/weixin_44153063/article/details/115602933