laravel5.8+vue-element-admin 前后端分离项目

前端： vue-element-admin
该框架有关文档：https://juejin.im/post/59097cd7a22b9d0065fb61d2
：https://element.eleme.cn/#/zh-CN/component/installation

参考的这个整理的动态权限管理项目：https://github.com/6ag/customer-service/tree/master/customer-service-manage

在其基础上我加了登录验证码（用laravel-captcha）
其框架的大概梳理：
后端交互地址：根目录的 .env.development 文件里的 VUE_APP_BASE_API变量赋值即可（生产环境在.env.production 文件）
在utils目录下的request.js文件中的设置各种返回码的对应处理，重点的是更后端交互的 jwt-auth 交互的校验token，根据自己 需求换校验方式

动态权限的实现：
先在/src/router/index.js里是前端框架路由，固定路由，没有权限要求为登录路由

	{
	    path: '/login',
	    component: () => import('@/views/login/index'),
	    hidden: true
	 },

页面在/src/views/login/index.vue，引入的接口/src/api/login.js，里面有验证码，登录的接口
在登录请求后成功后会执行/src/store/modules/user.js的login方法

```javascript
	// 登录
  login({ commit }, loginForm) {
    return new Promise((resolve, reject) => {
      login({ username: loginForm.username.trim(), password: loginForm.password,code:loginForm.code ,codeKey:loginForm.codeKey}).then(response => {

        commit('SET_TOKEN', response.data.access_token)
        setToken(response.data.access_token)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

  // 获取用户信息
  getInfo({ commit }) {
    return new Promise((resolve, reject) => {
      userApi.getUserInfo().then(response => {
        commit('SET_USER_INFO', response.data.userInfo)
        commit('SET_MENUS', response.data.menus)
        commit('SET_BUTTONS', response.data.buttons)
        resolve(response.data)
      }).catch(error => {
        reject(error)
      })
    })
  },

``
拿到后端返回的token后继续请求获取用户信息接口,用户信息里会包含后端处理过的动态权限，从而在/src/store/modules/permission.js里进行 生成动态路由 的处理从而存到缓存中，接着渲染到页面即可
（缺陷，多级目录的没有实现-希望补充）按钮权限直接用router.hidden = menu.hidden隐藏起来。

二次开发：

1. 在后台菜单权限管理增一个菜单（参考已有的数据，路由组件,权限标识），
2. /src/view/新建对应的文件夹+.vue文件(按照路由组件配置），
3. /src/api/目录下新家对应的后端交互接口
4. 页面里实现样式跟其逻辑

我大概理解就这样，哪里不对希望指出，谢谢。