# vue-element-web

**Repository Path**: hxxqwer/vue-element-web

## Basic Information

- **Project Name**: vue-element-web
- **Description**: 搭建的后台管理系统框架，vue2.x, element, vue-router, vuex, axios
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-06-29
- **Last Updated**: 2023-11-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue后台管理系统框架(vue-element-web)

## 1、框架介绍

基于Vue2.x的后台管理系统框架，技术栈为`vue2.x`、`elementUI`、`vue-router`、`vuex`、`axios`、`velocity`、`sass`、`webpack`、`mock`，适合从零开发的新项目使用。


## 2、目录结构

```
vue-element-web
├── mock     // 模拟数据
├── public   // 单页面index.html
├── src  // 核心文件
│   ├── api // 请求文件
│   ├── assets // 静态文件，例如图片
│   ├── components // 封装的全局组件、局部组件
│   ├── constants // 常量配置
│   ├── iconfonts // font字体
│   ├── icons // svg icon
│   ├── layout // 布局内容
│   ├── router // 路由配置
│   ├── store // vuex相关配置
│   ├── styles // 全局样式
│   ├── utils // 公共方法
│   ├── views // 核心业务相关的vue文件
│   ├── main.js // main.js
│   ├── permission.js // 路由守卫
│   ├── settings.js // 配置
│   └── whitelist.js // 白名单
│   ├── App.vue // 入口文件
├── proxy.config.js // 开发环境下跨域处理
├── babel.config.js // babel配置
├── package-lock.json
├── package.json 
├── tree.md
├── README.md
└── vue.config.js // vue.config.js配置
```

## 3、路由表属性配置

**文件：src/router/index.js**

```js
/**
 * 要求各级name必须存在且不重复。为了避免name重复，建议使用 父[0].name.父[1].name...当前.name的形式
 * 各属性配置：
 * 1、path: 访问页面的路径
 * 2、name: 访问页面的名称
 * 3、component: 懒加载组件。对于二级以上的情况，需要父级添加'router-view'
 *    render(c) { return c('router-view') }
 * 4、redirect: 重定向路径
 * 5、hidden: 是否显示， true：不显示
 * 6、meta: 属性配置，其中 
 *      roles:权限标识，数组格式；
 *      icon:配置图标；
 *      titleHidden:父级是否显示配置。仅当子页面数量为1时使用，此时值为true时不显示当前菜单
 *      linked: 是否可以点击跳转
 * 7、children: 子路由
 */
export const asyncRouters = {
  {
    path: "/system",
    name: "System",
    component: Layout,
    meta: {
      roles: ["editor"],
      icon: "system"
    },
    children: [
      {
        path: "",
        name: "System.Deptmanagement",
        component: { render(c) { return c('router-view') } },
        meta: {
          roles: ["editor"],
          icon: "deptmanagement"
        },
        children: [
          {
            path: "deptmanagement",
            name: "System.Deptmanagement.Deptmanagement",
            component: () =>
              import("@/views/system/deptmanagement/deptmanagement_index"),
            meta: {
              roles: ["editor"],
              icon: "deptmanagement",
              linked: true
            },
          },
        ]
      },
      {
        path: "usermanagement",
        name: "System.Usermanagement",
        component: () =>
          import("@/views/system/usermanagement/usermanagement_index"),
        meta: {
          roles: ["editor"],
          icon: "usermanagement",
          linked: true
        }
      },
    ],
  }
}
```

## 4、登录验证及权限路由处理逻辑

**文件：src/permission.js**

```js
/**
 *  1. 判断是否存在token， token不存在时对于白名单中的路由可以直接访问
 *     非白名单路由则跳转至登录页进行登录
 *  2. 存在token时说明已经登录，再次跳转至登录页面时则跳转至首页
 *  3. 获取用户权限，当用户权限存在时判断路由是否匹配，匹配直接跳转，不匹配跳转至404页面
 *  4. 当用户权限不存在时，重新获取用户权限和当前权限下的路由表，并动态添加到角色路由表中
 */
router.beforeEach(async (to, from, next) => {
  NProgress.start();
  const hasToken = getToken();

  if (hasToken) {
    if (to.path === "/login" || to.path === "/") {
      next({ path: "/dashboard/index" });
      NProgress.done();
    } else {
      try {
        const hasRoles =
          store.getters.roleList && store.getters.roleList.length > 0;
        if (hasRoles) {
          if (to.matched.length > 0) {
            next();
          } else {
            next({ path: "/404" });
          }
        } else {
          const roleList = await store.dispatch("user/getInfo");
          const accessRoutes = await store.dispatch(
            "permission/getAccessRoutes",
            roleList
          );
          router.addRoutes(accessRoutes);
          next({ ...to, replace: true });
        }
      } catch (error) {
        await store.dispatch("user/resetToken");
        Message({
          type: "error",
          message: error || "Error",
        });
        next(`/login?redirect=${to.path}`);
        NProgress.done();
      }
    }
  } else {
    if (whitelist.indexOf(to.path) > -1) {
      next();
    } else {
      MessageBox.confirm("您尚未登录，请登录", "提示", {
        confirmBottonText: "确定",
        cancelBottonText: "取消",
        type: "warning",
      }).then(() => {
        next({ path: "/login" });
        NProgress.done();
      });
    }
  }
});
```

## 5、其他相关配置

**文件：src/settings.js**

```js
// 需要使用缓存的pathList
const cachedPathList = [];

// 默认展示的菜单的name
const defaultActiveMenu = "Dashboard.Index";

// 当某路由children字段只存在一个hidden非true的菜单时,是否层叠显示
// true: 层叠显示  false: 非层叠显示,name、path显示子级
const isSingleChildStack = false;

// 导航区域显示方式 crumb：面包屑  tags: 标签
const navigationModel = "crumb"; 
```