vue-element-admin實戰（一）修改登錄接口

運用基礎模板，按照做者的建議，在模板上進行修改，vue-admin-templatephp

一、先創建後臺接口地址，我先採用的是PHP接口，架設web服務器，這個隨意，我是使用phpstudy，端口爲8082，在www下創建apinew文件夾，新建token.php和userinfo.php，模擬返回的json數據，我這裏兩個文件返回的都是同樣的。前端

<?php $arr = array('code' => 20000, 'data'=>array('roles' =>  array('admin'), 'introduction' => '我是一個管理員', 'avatar' => 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif','name' => 'Super Admin','token' => 'admin')); //$arr = array('code' => 50008, 'message' => 'Account and password are incorrect.');
   echo json_encode($arr); ?>

實際login返回數據爲：vue

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

登陸發送數據爲git

http://localhost:8080/dev-api/user/info?token=admin-tokengithub

返回數據爲：web

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

二、修改vue.config.jsnpm

const port = 8080 // dev port //修改本項目端口爲8080

proxy: { // change xxx-api/login => mock/login
      // detail: https://cli.vuejs.org/config/#devserver-proxy
 [process.env.VUE_APP_BASE_API]: { target: `http://localhost:8082`, //修改後臺接口地址
        changeOrigin: true, pathRewrite: { ['^'+process.env.VUE_APP_BASE_API]: '' } } }, //after: require('./mock/mock-server.js') //註釋掉

三、修改.env.developmentjson

# base api VUE_APP_BASE_API = ''  //設置爲空

四、修改str/api/user.jsapi

export function login(data) { return request({ url: '/apinew/token.php', //地址指向新的接口 method: 'post', data }) }

export function getInfo(token) { return request({ //url: '/user/info',
    url: '/apinew/userinfo.php', //指向新接口 method: 'get', params: { token } }) }

五、npm run dev 走起........完美......服務器

最終登錄後效果：

注意的坑：

一、運用開發者工具查看接口地址時，會與實際不一致

實際看返回數據，已是正常的返回數據

這是代理致使的，是正常的，不要給開發者工具的URL誤導了。

二、登錄是經過了2個接口才能正常登錄的，具體爲：

登陸：當用戶填寫完帳號和密碼後向服務端驗證是否正確，驗證經過以後，服務端會返回一個 token，拿到token以後（我會將這個token存貯到cookie中，保證刷新頁面後能記住用戶登陸狀態），前端會根據token再去拉取一個 user_info 的接口來獲取用戶的詳細信息（如用戶權限，用戶名等等信息）。