vue-element-admin前后端分离控制动态菜单

准备

 - # 克隆项目
git clone https://github.com/PanJiaChen/vue-admin-template.git

# 进入项目目录
cd vue-admin-template

# 安装依赖
npm install

# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 启动服务
npm run dev

配置登录和用户详情

本次接口基于Fast Mock进行数据模拟
login接口
post请求

https://www.fastmock.site/mock/769f1e043d21e437f46f09b9e2382b4f/element/user/login

userInfo接口
get请求

https://www.fastmock.site/mock/769f1e043d21e437f46f09b9e2382b4f/element/user/info

打开 vue-admin-template\src\utils\request.js 文件
修改baseUrl为上方的接口链接 https://www.fastmock.site/mock/769f1e043d21e437f46f09b9e2382b4f/element

// create an axios instance
const service = axios.create({
   
  baseURL: 'http://localhost:8081', // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

打开vue-admin-template\src\api\user.js文件 修改login方法 和 userInfo方法

动态路由

• 在router/index.js中只需要基础的路由,其他的都可以删了
• 在store/modules/user.js中,有个getInfo方法查询了用户基本信息,返回了用户菜单列表

在getDefaultState中添加必要的数据
我这里主要添加了
const getDefaultState = () => {
   
  return {
   
    id: 0, //ID
    token: getToken(), //用户的Token
    name: '', //用户名字
    avatar: '', //用户图像
    menus: [], //用户菜单
    authoritys: [] //用户权限
  }
}

• 设置Set方法

const mutations