element-admin 使用笔记

JS 评论

主要包括API接口格式，登录流程，跨域问题等的解决方案。

一、API接口统一格式

后台提供的API接口返回格式应该满足如下格式才可

1
2
3
4
5
{
   code: 20000, /* 50008 50012 50014 都会造成重新登录 */ 
   message: '提示消息',
   data: {}
}

在授权后的请求中，将把token放在header的X-token中

1
header.X-Token = 'your token'

二、登录接口

请求

1
2
3
4
{
    username: 'account',
    password: 'password',
}

返回

1
2
3
4
5
6
7
{
    code: 20000,
    message: 'success',
    data: {
        token: 'your token'
    }
}

三、用户信息接口

1
2
3
4
5
6
7
8
9
10
{
    code: 20000,
    message: 'success',
    data: {
        name: 'name',
        avatar: '头像',
        introduction: '',
        roles: [], // 取值 admin、editor
    }
}

四、代理请求的时候一直pending

详细文档”https://blog.csdn.net/yuse6262/article/details/107393394”

超时时候

1
2
3
4
5
6
proxy: {
    "/api": {
        target: 'http://127.0.0.1:8000',
        changeOrigin: true,
    }
}

解决超时

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
proxy: {
    "/api": {
        target: 'http://127.0.0.1:8000',
        changeOrigin: true,
        // 由于vue中使用了body-parser 导致http中的body被序列化两次，从而使得配置代理后后端无法获取body中的数据
        onProxyReq: function(proxyReq, req, res, options) {
            if (req.body) {
                const reg = new RegExp('application/json') 
                if (reg.test(proxyReq.getHeader('Content-Type'))) {
                    const bodyData = JSON.stringify(req.body) 
                    proxyReq.setHeader('Content-Length', Buffer.byteLength(bodyData))
                    // stream the content
                    proxyReq.write(bodyData)
                }
            }
        }
    }
}