vue-element-template實戰（一）修改登陸接口

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

1、先建立后台接口地址，我先采用的是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返回數據為：

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

登錄發送數據為

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

返回數據為：

{"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"}}

 登出返回數據

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

 

2、修改vue.config.js

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')  //注釋掉

3、修改.env.development

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

4、修改str/api/user.js

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 }
  })
}

export function logout() {
  return request({
    //url: '/vue-admin-template/user/logout',
    url: '/apinew/logout.php',  //指向新接口
    method: 'post'
  })
}

 

5、npm run dev 走起........完美......

最終登陸后效果：

 

注意的坑：

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

 

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

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

2、登陸是通過了2個接口才能正常登陸的，具體為：

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