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