1、vue.config.js (后台使用phalapi)
devServer: { // development server port 8000 port: 8000,
// TODO api proxy 關於api請求代理: 如果期望啟用代理,請刪除mockjs的配置 mockjs /src/main.js
proxy: { '/api': { target: 'http://127.0.0.1:8082/phalapi/public/', ws: false, changeOrigin: true, //開啟代理,是否跨域 pathRewrite: { '^/api': '' //需要rewrite的 } } } }
2、src/main.js 注釋掉mock
//import './mock'
3、src/api/login.js 修改api
export function login (parameter) { return axios({ //url: '/auth/login', url: '?service=App.User.login', method: 'post', data: parameter }) }
4、修改.env
# 當使用代理方式訪問web api時, 此變量指定所有的api請求的uri前綴 VUE_APP_API_BASE_URL=/api
5、后台App.User.login接口返回的數據:
{ "ret": 200, "data": { "title": "Hello World!", "token": "afsd123123123123123123", "avatar": "https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png", "createTime": "1497160610259", "creatorId": "admin", "deleted": "0", "id": "7DEadbb2-F6d7-e08D-FA70-EEbBb132f91D", "lang": "zh-CN", "lastLoginIp": "27.154.74.117", "lastLoginTime": "1534837621348", "name": "Jennifer Young", "roleId": "admin", "username": "admin" }, "msg": "" }
6、src/store/modules/user.js 修改前台的獲取數據:
// TODO login 登錄:這里執行真正的登錄邏輯 Login ({ commit }, userInfo) { return new Promise((resolve, reject) => { login(userInfo).then(response => { //const result = response.result const result = response.data console.log(result) // TODO login 登錄:token的作用, 只是用於判斷用戶是否登錄, 無其它作用 Vue.ls.set(ACCESS_TOKEN, result.username, 7 * 24 * 60 * 60 * 1000) commit('SET_TOKEN', result.username) resolve() }).catch(error => { reject(error) }) }) },
7、后台App.User.info接口返回的數據:
{ "ret": 200, "data": { "id": "4291d7da9005377ec9aec4a71ea837f", "name": "管理員", "username": "admin", "password": "", "avatar": "https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png", "status": "1", "telephone": "", "lastLoginIp": "27.154.74.117", "lastLoginTime": "1534837621348", "creatorId": "admin", "createTime": "1497160610259", "merchantCode": "TLif2btpzg079h15bk", "deleted": "0", "roleList": [ "admin", "company-admin" ], "funPermissionList": [ "user_add", "user_delete" ], "menuPermissionList": [ "fun-permission", "dashboard", "form", "table", "profile", "result", "exception", "user", "dashboard", "support" ], "menuTree": [ { "path": "/welcome/index", "flag": "welcome", "title": "menu:welcome", "icon": "smile" }, { "path": "/dashboard", "flag": "dashboard", "title": "menu:dashboard", "icon": "eye", "children": [ { "path": "/dashboard/analysis", "flag": "analysis", "title": "menu:analysis" }, { "path": "https://www.baidu.com/", "flag": "monitor", "title": "menu:monitor" }, { "path": "/dashboard/workplac", "flag": "workplac", "title": "menu:workplac" }, { "path": "/other/test", "flag": "test", "title": "menu:test" } ] }, { "path": "/form", "flag": "form", "title": "menu:form", "icon": "form", "children": [ { "path": "/form/base-form", "flag": "BaseForm", "title": "menu:BaseForm" }, { "path": "/form/step-form", "flag": "StepForm", "title": "menu:StepForm" }, { "path": "/form/advanced-form", "flag": "AdvancedForm", "title": "menu:AdvancedForm" }, { "path": "/form/other-form", "flag": "OtherForm", "title": "menu:OtherForm" } ] } ] }, "msg": "" }
8、src/api/login.js 修改api
export function getInfo (username) { return axios({ //url: '/user/info', url: '?service=App.User.info', method: 'post', data: { username }, headers: { 'Content-Type': 'application/json;charset=UTF-8' } }) }
9、src/store/modules/user.js 修改前台的獲取數據:
// 獲取用戶信息 GetInfo ({ commit }) { return new Promise((resolve, reject) => { // TODO login 登錄:登錄成功之后, GetInfo獲取用戶基本信息 getInfo(Vue.ls.get(ACCESS_TOKEN)).then(response => { commit('SET_LOADED_USER_INFO_FROM_BACKEND', true) //const result = response.result const result = response.data commit('SET_ROLES', result.roleList) // 緩存功能權限 commit('SET_FUN_PERMISSIONS', result.funPermissionList) // 緩存路由權限 commit('SET_ROUTER_PERMISSIONS', result.menuPermissionList) // TODO 構建動態菜單 // 設置用戶動態菜單(這是由服務器返回的動態菜單), 一般來說您的數據結構和我這肯定是不一樣的. 因此可以在這里進行轉換, 轉換成功完成之后, 再執行下面的`SET_MENU_TREE`方法 commit('SET_MENU_TREE', result.menuTree) // 設置用戶信息 commit('SET_INFO', result) // 用戶姓名 // TODO login tips 修改登錄成功之后的提示語 commit('SET_NAME', { name: result.name, welcome: welcome() }) // 用戶圖片 commit('SET_AVATAR', result.avatar) resolve(response) }).catch(error => { reject(error) }) }) },
10、src/permission.js 修改前台的獲取數據:
// TODO login 登錄:用戶已登錄, 但尚未獲取到用戶信息 if (!store.getters.loadedUserInfoFromBackend) { // TODO login 登錄:登錄成功之后, GetInfo獲取用戶基本信息 store .dispatch('GetInfo') .then(res => { console.log('permission.js,res:'+JSON.stringify(res)) //const menuPermissionList = res.result && res.result.menuPermissionList const menuPermissionList = res.data && res.data.menuPermissionList console.log('permission.js,res.result.menuPermissionList'+menuPermissionList) // TODO login 登錄:用戶基本信息獲取成功之后, 獲取路由信息(菜單信息) store.dispatch('GenerateRoutes', { menuPermissionList }).then(() => { // 根據菜單標識集合生成可訪問的路由表 // 動態添加可訪問路由表 router.addRoutes(store.getters.addRouters) // TODO login 登錄:獲取url中的redirect參數,有redirect參數值,則轉入redirect指定的界面 const redirect = decodeURIComponent(from.query.redirect || to.path) if (to.path === redirect) { // hack方法 確保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record next({ ...to, replace: true }) } else { // 跳轉到目的路由 next({ path: redirect }) } }) }) .catch(() => { // TODO login 登錄:用戶基本信息獲取失敗的處理 notification.error({ message: '錯誤', description: '請求用戶信息失敗,請重試' }) store.dispatch('Logout').then(() => { next({ path: '/user/login', query: { redirect: to.fullPath } }) }) }) } else { next() }
11、phalapi后台代碼:
public function info() { // $username = $this->username; // 賬號參數 // $password = $this->password; // 密碼參數 // 更多其他操作…… $roleList=array('admin','company-admin'); $funPermissionList=array('user_add','user_delete'); $menuPermissionList=array('fun-permission','dashboard','form','table','profile','result','exception','user','dashboard','support'); $menuTree=array(array('path'=>'/welcome/index','flag'=>'welcome','title'=>'menu:welcome','icon'=>'smile'),array('path'=>'/dashboard','flag'=>'dashboard','title'=>'menu:dashboard','icon'=>'eye','children'=>array(array('path'=>'/dashboard/analysis','flag'=>'analysis','title'=>'menu:analysis'),array('path'=>'https://www.baidu.com/','flag'=>'monitor','title'=>'menu:monitor'),array('path'=>'/dashboard/workplac','flag'=>'workplac','title'=>'menu:workplac'),array('path'=>'/other/test','flag'=>'test','title'=>'menu:test'))),array('path'=>'/form','flag'=>'form','title'=>'menu:form','icon'=>'form','children'=>array(array('path'=>'/form/base-form','flag'=>'BaseForm','title'=>'menu:BaseForm'),array('path'=>'/form/step-form','flag'=>'StepForm','title'=>'menu:StepForm'),array('path'=>'/form/advanced-form','flag'=>'AdvancedForm','title'=>'menu:AdvancedForm'),array('path'=>'/form/other-form','flag'=>'OtherForm','title'=>'menu:OtherForm')))); return array('id' => '4291d7da9005377ec9aec4a71ea837f','name'=>'管理員','username'=>'admin','password'=>'','avatar'=>'https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png','status'=>'1','telephone'=>'','lastLoginIp'=>'27.154.74.117','lastLoginTime'=>'1534837621348','creatorId'=>'admin','createTime'=>'1497160610259','merchantCode'=>'TLif2btpzg079h15bk','deleted'=>'0','roleList'=>$roleList,'funPermissionList'=>$funPermissionList,'menuPermissionList'=>$menuPermissionList,'menuTree'=>$menuTree); }