vue-admin-template去掉mock，使用fastmock线上API做权限登录

vue-admin-template默认使用了mock，如果要去掉，替换为自己的API做权限登录应该怎么办呢？利用fastmock做一个在线的API测试下方法是否靠谱。vue-admin-template与vue-element-admin的登录权限验证方式是一样的，只不过vue-element-admin增加了更多丰富的基础数据。

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

权限验证：通过token获取用户对应的 role，动态根据用户的 role 算出其对应有权限的路由，通过 router.addRoutes 动态挂载这些路由。

首先在fastmock建立自己的项目，加入API，我们建立4个api：login、userInfo、logout、tableList：

以login为例，

新建接口

接口名：login
类型：post
Mock状态：开
返回代码：

{"code":20000,"data":{"token":"admin-token"}}

接口名：userInfo
类型：get
Mock状态：开
返回代码：

{"code":20000,"data":{"token":"admin-token"}}

接口名：logout
类型：post
Mock状态：开
返回代码：

{"code":20000,"data":"success"}

接口名：tableList
类型：get
Mock状态：开
返回代码：

{"code":20000,"data":{"total":30,"items":[{"id":"810000201206201687","title":"Utt ibpacsk zkzdy pcjnnf ujxuukpwkg pwdiqs kevv nujkxzqk krutyf bupgteh rkwswe rtmiph dxjbky bnxxmgd mqpib qflxxshbn avckpke nixs ribsfkl.","status":"published","author":"name","display_time":"2019-03-12 00:11:35","pageviews":1046},{"id":"430000202107121968","title":"Ouuuxs xhjzmhtf tgttm strdy wytmhkzas nnbb sdwdfbern yfimjoo oqfsqfd kbat etvn dwxixev jbswzzwh ekslti unncbyeo hwcls wgl.","status":"draft","author":"name","display_time":"1977-05-04 08:39:06","pageviews":2492},{"id":"420000199103185570","title":"Wsun utkhxyi ijosqm didt jvjr apksxbtg txmyd tgjbw qyuhk btsosluxw hfrnrv elqritul jwbjwrpi vmfr hbbltlqr jklet.","status":"deleted","author":"name","display_time":"1973-08-08 16:57:29","pageviews":1422},{"id":"350000200012064236","title":"Megg ecdx wykcwexg xekjruuucx uqdedmg ynhanwwvr ogiqplmv twrih rlm dyfamb.","status":"draft","author":"name","display_time":"1971-06-14 18:24:27","pageviews":1854},{"id":"370000198810255620","title":"Bdzw mzblxjrkg lqj egh oulfdeop hxob tgdmgwe xzvcs exftophydx nfspkcfws xnlronqob lez vsbtvig ajxswvkw bdw qagyywel.","status":"published","author":"name","display_time":"1981-01-13 17:44:40","pageviews":726},{"id":"54000020050511994X","title":"Miftccexfs knngdy vvbukv wdydxh vbzmt paptqgqiyp wkehtbzy osqjjxr orfcq epc hgsjv kxcqmf.","status":"draft","author":"name","display_time":"2002-02-09 15:27:15","pageviews":1430},{"id":"710000198611175517","title":"Toogk ytcene yecl xsaccwjm mpyzra gyhpq ohikhzyut ekezssxx atzkgv btwssukoq hfdqcomeg lyd ajhnngfgm gcpjlxvexx ivqiswbx zufkb lqwx.","status":"published","author":"name","display_time":"2008-05-23 01:50:19","pageviews":632},{"id":"710000199309134268","title":"Lkizonk jhbkottpn lbwyirenkf tzghno nwtvdgh quj lrdqlnd mromiuj jswlrprix rmicd hwj alvwxqyfe bhepiudxem hdevbpxf xcvjyoi eosfdminbp lol pgdvhau kghqywfho.","status":"deleted","author":"name","display_time":"2021-07-28 18:55:13","pageviews":4648},{"id":"310000201811067764","title":"Unltxqua uhps ipjedpus sbndi typtpfgqmv icaa fjbkqczpxx rsfjsguuce xcbignocoj qib zotue civydx czrwfczvba tmigsvkk lhmdnjwjtj idqmdifi.","status":"draft","author":"name","display_time":"2010-05-20 07:14:34","pageviews":1057},{"id":"320000197012030634","title":"Tkfwjoe uvem xhyvom hvm qvmambuu rtwpwv uajee cgbu mohs sgc thgl.","status":"draft","author":"name","display_time":"2010-05-12 04:07:21","pageviews":1838},{"id":"420000199011014635","title":"Qiunxgrsr skibyl nbaequpke jxph ffjtilsu jfuvvkyiv pgyp ezhpvsjs pfp lipuv kqvcvqi wedf ywcow grvbm.","status":"published","author":"name","display_time":"1996-03-23 23:17:57","pageviews":4279},{"id":"52000019950119082X","title":"Suaorxfjn biqpbyxswv ogwsgnfkh cqssdypmv mxsp kejhukpoto crsns mkiyxw hhg fiewvmqjn jiwyttm ejuq.","status":"published","author":"name","display_time":"2016-10-26 10:18:51","pageviews":1135},{"id":"620000197801095554","title":"Fypmw kwbufvaa blwsvfl vkvdkpmkc ppjzyiuq iivwmhgln hicpvyoiyj plktkkdl ortgco fppaka iwtmgcqpd gmihf uulsr ble.","status":"deleted","author":"name","display_time":"1984-08-23 11:32:10","pageviews":3729},{"id":"350000199503193846","title":"Acagnsq zgfurc fbyi rlecfu hiqgo ijg yqeha nir dyqlfe mscdwekvrv othcmu txjquwxj lgphrttxhw drxnq nofjubcru xvpvmuelun heupojcbe ljiu lrsohp.","status":"published","author":"name","display_time":"2010-11-21 20:32:45","pageviews":2014},{"id":"370000199908254663","title":"Oemhudkuji frgothqkx thstfm jxvnkzlh nxshcs nyrkb wlxb dmjtfw rywvqjg wrcpw gwxk oikbdcr fsdq.","status":"published","author":"name","display_time":"1974-08-19 19:52:32","pageviews":1971},{"id":"430000200511291361","title":"Oomtiv jiqpbi iwlj bsbog zuwylx blylvbo udglyfou hojl rpysr hilac ysebdvooj ppqndeqryy qrhinif jptlghmnd vdaylgocq tpfei mqtrcwm fvcq.","status":"published","author":"name","display_time":"1984-09-05 12:07:26","pageviews":1652},{"id":"120000199103170984","title":"Hqitmtrkl srbxlfcjxi yxcxxh rgnfbhk qcvieqvp uvwbyzbd vjuvdvqj bhrtgsbu bxggedlu upgpsbwzg hwybgsosyf dtzjpm vrwnee fdfepxjl lfekgrndt tfefxaduu hwoupulic.","status":"draft","author":"name","display_time":"1976-06-06 08:14:15","pageviews":1378},{"id":"310000199106075216","title":"Unkbx yyofxymt lxqhobf orvbeirr weldjhyrwi ijswrdyea dmsioqggv nbvs qmkuj mriuqpddyo xfnjnetyn qeeqy hrnwvdq lrnhgibhgt pmcpmg ljlssdjkh lrzgvnrv.","status":"draft","author":"name","display_time":"2016-12-19 16:09:23","pageviews":422},{"id":"150000199805051547","title":"Ktieumtn nejfese vsfrqvxxfx ivelivnvr ktfrqxo ozxqpbt riiipi zkbcov vsvynwcx romll owew otmoox fdlrhibp wxhkmjapk lltyqmiswh ezpyg szatjrnfs zaqblowg tswujv.","status":"draft","author":"name","display_time":"2008-05-07 03:47:18","pageviews":1241},{"id":"230000200502223861","title":"Wvcgoscyk zkbmuin mxgwgjjgt sdcqk xnw uwugobu czlghjz eqbqpfuhb kxej jlsmxx hlwvoxpng tilzxncnx cwwiv mdkrhi utdzznxlu dpeyydytxp.","status":"draft","author":"name","display_time":"1971-10-10 22:41:04","pageviews":1781},{"id":"310000199110251067","title":"Mdocxyhm qbro ihvnwf tqeemasylo dfsmgsm oowq olqghalso mlwxpig wqlyeq ukduoan pfpsqpys fuwdl zputvduun lmo.","status":"deleted","author":"name","display_time":"2009-01-12 09:43:31","pageviews":3011},{"id":"810000201103314785","title":"Vtpj qlwu krogs krx bxmpm dmxyblce zygepme nlgpvlybn ekfrkscy ljenffxy jitfddvh nusjyyx htsypivv buns fkxhme wxpdefnwt bbbrbxf wmvhe fwhcxsxxwf.","status":"published","author":"name","display_time":"1991-08-02 00:42:31","pageviews":637},{"id":"510000199907158051","title":"Yqgskkqn vhovuibgx vizvna dshjltfkn biuru emxhjwaf gnjfm xcqkphf fwafedarr pdbe nxdcc drboljbj scitd htfftucswa xtefc lboccj rtntt.","status":"draft","author":"name","display_time":"1980-08-01 15:52:39","pageviews":4782},{"id":"540000202105067799","title":"Rdmgcxi nrrpjppz rwxdlxlw uufguxqc nsgjguoh vhls thlvbvesd jxufnvpj zht ntwg gepbw xldqtz ulejolp.","status":"draft","author":"name","display_time":"2006-10-05 01:02:07","pageviews":696},{"id":"51000019960416741X","title":"Njeggowfh davsnohjh jhbbxphu qykp qzrppjwii xmburumt dgdi isydw nhvozj pxdc hbrfauuyl qxoldtcbo bqhof frkieicnh pbgkslrcw iohx jggxmuvn cyvhpjqg vhnibu.","status":"draft","author":"name","display_time":"1974-07-13 22:13:03","pageviews":2531},{"id":"630000199607031662","title":"Tgpe rrwtcuajrn qoreqirz rws sdxyrxifw kaw huwsagd gkljie dlwz eotblflopt dulcrmy mxqumzlhz mbikcbw nxeluijjms rtmynpui.","status":"draft","author":"name","display_time":"1995-02-04 16:17:24","pageviews":1446},{"id":"130000202104270166","title":"Wgxl ldhwn rhs govhglni qdyuetce tjtxjiqt lvfeqo drtgsjr nfki iaemc ltps hqtsukuj.","status":"deleted","author":"name","display_time":"1997-12-24 13:07:31","pageviews":1378},{"id":"370000197407191159","title":"Fsencypbo gntsj qmyoicstv xbsconc nhonsesqpq phwkydvw uzpj doyo rjlikos hohfsp mxrltobsw ufcuzcw uzjqsulw aekfry ndwsxqkdg chvaf hbckvfyc.","status":"published","author":"name","display_time":"2015-10-10 07:53:44","pageviews":3848},{"id":"15000020150214376X","title":"Ksgdnyr fqhhiceux cfk ldiqnyst qcnov ojargey cosfkbtqv kohnzl kfdvnd scfveslo dapw uiglat.","status":"draft","author":"name","display_time":"1987-05-27 15:24:30","pageviews":2278},{"id":"530000199605263415","title":"Pvkt xvmni licqsn ngdnameako tye ybdspoqgo hoem cfuotgg hpt pmtm gsn qglw krltfdx qzcuc yawikwrvyu dqxlxp.","status":"deleted","author":"name","display_time":"1982-01-07 03:09:58","pageviews":3091}]}}

修改vue.config.js

取消本地mock，注释掉：

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

增加反向代理，在devServer内加入：

proxy: {
  '/': {
    target: 'https://www.fastmock.site/mock/*******/api', // 这个地址在你的fastmock里面查找
    ws: true,
    changeOrigin: true
  }
}

修改dev环境

将.env.development文件内容换为：

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = ''

修改api请求

src/api/user.js：

import request from '@/utils/request'

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

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

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

src/api/table.js：

import request from '@/utils/request'

export function getList(params) {
  return request({
    // url: '/vue-admin-template/table/list',
    url: 'tableList',
    method: 'get',
    params
  })
}

更多参考文档：

https://my.oschina.net/u/4636550/blog/4912081
https://www.jianshu.com/p/09b2ac91fa91
https://blog.csdn.net/Appear_DS/article/details/113465551