├── .browserslistrc
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   ├── logo.png
    │   ├── index.css
    │   └── index.less
    ├── api
    │   ├── user.js
    │   ├── http.js
    │   ├── index.js
    │   └── page.js
    ├── App.vue
    ├── components
    │   ├── BreadCrumb.vue
    │   ├── Main.vue
    │   ├── main
    │   │   ├── TopBar.vue
    │   │   └── Card.vue
    │   ├── Aside.vue
    │   └── Header.vue
    ├── main.js
    ├── plugins
    │   └── element.js
    ├── store
    │   └── index.js
    ├── views
    │   ├── NotFound.vue
    │   ├── Home.vue
    │   ├── Login.vue
    │   └── Page1.vue
    ├── mock
    │   ├── my-radom.js
    │   └── index.js
    └── router
    │   └── index.js
├── .editorconfig
├── babel.config.js
├── .gitignore
├── .eslintrc.js
├── package.json
└── README.md


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aizener/admin-permission/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aizener/admin-permission/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/index.css:
--------------------------------------------------------------------------------
1 | body {
2 |   margin: 0;
3 |   padding: 0;
4 | }
5 | * {
6 |   box-sizing: border-box;
7 | }
8 | 


--------------------------------------------------------------------------------
/src/api/user.js:
--------------------------------------------------------------------------------
1 | import http from './http'
2 | 
3 | export const login = data => {
4 |   return http('/login', 'post', data)
5 | }


--------------------------------------------------------------------------------
/src/assets/index.less:
--------------------------------------------------------------------------------
1 | body {
2 |   margin: 0;
3 |   padding: 0;
4 | }
5 | 
6 | * {
7 |   box-sizing: border-box;
8 | }
9 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newline = true
6 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   presets: [
 3 |     '@vue/cli-plugin-babel/preset'
 4 |   ],
 5 |   plugins: [
 6 |     [
 7 |       'component',
 8 |       {
 9 |         libraryName: 'element-ui',
10 |         styleLibraryName: 'theme-chalk'
11 |       }
12 |     ]
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------
/src/api/http.js:
--------------------------------------------------------------------------------
 1 | import Axios from 'axios'
 2 | 
 3 | const axios = Axios.create({
 4 |   // baseURL: process.env.NODE_ENV === 'development' ? '' : '',
 5 | })
 6 | 
 7 | export default (url, method = 'get', data = {}) => {
 8 |   return axios({
 9 |     url,
10 |     method,
11 |     data
12 |   })
13 | }


--------------------------------------------------------------------------------
/src/api/index.js:
--------------------------------------------------------------------------------
 1 | const context = require.context('./', false, /.js$/)
 2 | 
 3 | const modules = {}
 4 | context.keys().forEach(fileName => {
 5 |   if (!['./index.js', './http.js'].includes(fileName)) {
 6 |     Object.assign(modules, context(fileName))
 7 |   }
 8 | })
 9 | 
10 | export default modules


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view></router-view>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'app',
10 |   components: {
11 |   }
12 | }
13 | </script>
14 | 
15 | <style>
16 |  #app {
17 |    width: 100%;
18 |    height: 100vh;
19 |  }
20 | </style>
21 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   extends: [
 7 |     'plugin:vue/essential',
 8 |     '@vue/standard'
 9 |   ],
10 |   parserOptions: {
11 |     parser: 'babel-eslint'
12 |   },
13 |   rules: {
14 |     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
15 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
16 |     'eol-last': 'off'
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/src/components/BreadCrumb.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-breadcrumb separator-class="el-icon-arrow-right">
 3 |     <el-breadcrumb-item v-for="(item, idx) in breads" :key="idx" :to="{ path: item.path }">
 4 |       {{ item.name }}
 5 |     </el-breadcrumb-item>
 6 |   </el-breadcrumb>
 7 | </template>
 8 | 
 9 | <script>
10 | import { mapState } from 'vuex'
11 | export default {
12 |   computed: {
13 |     ...mapState(['breads'])
14 |   }
15 | }
16 | </script>
17 | 
18 | <style>
19 | 
20 | </style>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import store from './store'
 5 | import './plugins/element.js'
 6 | import './assets/index.less'
 7 | import Api from './api'
 8 | import './mock'
 9 | import { MessageBox, Message } from 'element-ui'
10 | import 'animate.css'
11 | 
12 | Vue.config.productionTip = false
13 | Vue.prototype.$api = Api
14 | Vue.prototype.$confirm = MessageBox.confirm
15 | Vue.prototype.$message = Message
16 | 
17 | new Vue({
18 |   router,
19 |   store,
20 |   render: h => h(App)
21 | }).$mount('#app')
22 | 


--------------------------------------------------------------------------------
/src/api/page.js:
--------------------------------------------------------------------------------
 1 | import http from './http'
 2 | 
 3 | export const getList = data => {
 4 |   return http('/list', 'get', data)
 5 | }
 6 | 
 7 | export const getTotal = () => {
 8 |   return http('/list/total')
 9 | }
10 | 
11 | export const getListByValue = data => {
12 |   return http('/list/value', 'get', data)
13 | }
14 | 
15 | export const addList = data => {
16 |   return http('/list/add', 'post', data)
17 | }
18 | 
19 | export const updateList = data => {
20 |   return http('/list/update', 'put', data)
21 | }
22 | 
23 | export const deleteList = data => {
24 |   return http('/list/delete', 'delete', data)
25 | }


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/plugins/element.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import {
 3 |   Container,
 4 |   Header,
 5 |   Aside,
 6 |   Main,
 7 |   Button,
 8 |   Menu,
 9 |   MenuItem,
10 |   Submenu,
11 |   Breadcrumb,
12 |   BreadcrumbItem,
13 |   Form,
14 |   FormItem,
15 |   Table,
16 |   TableColumn,
17 |   Input,
18 |   Icon,
19 |   Pagination,
20 |   Loading
21 | } from 'element-ui'
22 | 
23 | Vue
24 |   .use(Container)
25 |   .use(Header)
26 |   .use(Aside)
27 |   .use(Main)
28 |   .use(Button)
29 |   .use(Menu)
30 |   .use(MenuItem)
31 |   .use(Submenu)
32 |   .use(Breadcrumb)
33 |   .use(BreadcrumbItem)
34 |   .use(Form)
35 |   .use(FormItem)
36 |   .use(Table)
37 |   .use(TableColumn)
38 |   .use(Input)
39 |   .use(Icon)
40 |   .use(Pagination)
41 |   .use(Loading)


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | Vue.use(Vuex)
 5 | 
 6 | export default new Vuex.Store({
 7 |   state: {
 8 |     breads: [],
 9 |     user: {}
10 |   },
11 |   mutations: {
12 |     addBread (state, bread) {
13 |       const index = state.breads.findIndex(_bread => _bread.name === bread.name)
14 |       if (index > -1) {
15 |         state.breads.splice(index + 1, state.breads.length - index - 1)
16 |       } else {
17 |         state.breads.push(bread)
18 |       }
19 |     },
20 |     removeBread (state, bread) {
21 |       state.breads = state.breads.filter(_bread => _bread !== bread)
22 |     },
23 |     setUser (state, user) {
24 |       state.user = user
25 |     }
26 |   },
27 |   actions: {
28 |   },
29 |   modules: {
30 |   }
31 | })
32 | 


--------------------------------------------------------------------------------
/src/components/Main.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="main">
 3 |     <div class="bread">
 4 |       <v-bread-crumb></v-bread-crumb>
 5 |     </div>
 6 |     <div class="content">
 7 |       <router-view :key="+new Date()"></router-view>
 8 |     </div>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | import BreadCrumb from '@/components/BreadCrumb.vue'
14 | 
15 | export default {
16 |   data () {
17 |     return {
18 |       activeKey: ''
19 |     }
20 |   },
21 |   components: {
22 |     'v-bread-crumb': BreadCrumb
23 |   }
24 | }
25 | </script>
26 | 
27 | <style lang="less" scoped>
28 | .content {
29 |   width: 100%;
30 |   height: 100%;
31 |   background-color: #fff;
32 |   padding: 20px 15px;
33 |   border-radius: 5px;
34 |   transform: translateY(15px);
35 | }
36 | </style>
37 | 


--------------------------------------------------------------------------------
/src/views/NotFound.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="not-found">
 3 |     <h1>啊哦！找不到相关页面o(╥﹏╥)o。</h1>
 4 |     <router-link to>
 5 |       <p @click="$router.back(-1)">返回上一级页面</p>
 6 |     </router-link>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 | 
13 | }
14 | </script>
15 | 
16 | <style lang="less" scoped>
17 | .not-found {
18 |   width: 100%;
19 |   height: 100vh;
20 |   background-color: #6495ED;
21 |   display: flex;
22 |   justify-content: center;
23 |   align-items: center;
24 |   h1 {
25 |     margin: 0;
26 |     color: #fff;
27 |   }
28 |   a {
29 |     color: #E0FFFF;
30 |     font-size: 14px;
31 |     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
32 |     transform: translateY(10px);
33 |   }
34 | }
35 | </style>
36 | 


--------------------------------------------------------------------------------
/src/components/main/TopBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="top-bar">
 3 |     <el-input placeholder="请输入内容，按回车键搜索..." @keydown.enter.native="handleSearch" v-model="inputValue">
 4 |       <template slot="append">
 5 |        搜索
 6 |       </template>
 7 |     </el-input>
 8 |     <el-button type="primary" @click="$emit('show')">添加商品</el-button>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | export default {
14 |   data () {
15 |     return {
16 |       inputValue: ''
17 |     }
18 |   },
19 |   methods: {
20 |     handleSearch () {
21 |       this.$emit('handleSearch', this.inputValue)
22 |     }
23 |   }
24 | }
25 | </script>
26 | 
27 | <style lang="less" scoped>
28 | .top-bar {
29 |   .el-input {
30 |     width: 300px;
31 |   }
32 |   .el-button {
33 |     margin-left: 15px;
34 |   }
35 | }
36 | </style>


--------------------------------------------------------------------------------
/src/mock/my-radom.js:
--------------------------------------------------------------------------------
 1 | // 使用 Mock
 2 | var Mock = require('mockjs')
 3 | 
 4 | Mock.Random.extend({
 5 |   likes: function () {
 6 |     const likes = [
 7 |       '喜欢打游戏，看电影，尤其是英雄联盟和欧美大片。',
 8 |       '喜欢做饭，尤其是西餐，喜欢做甜点，自己每次都吃得饱饱的。',
 9 |       '我最爱去游泳了，当然也喜欢潜水，在海底下看各种好看的鱼鱼。',
10 |       '我最最喜欢的就是去旅游了，看沿途的风景，真是美呆了。',
11 |       '我的爱好是打篮球，我很喜欢打篮球，我的偶像是科比。',
12 |       '我超喜欢去蹦迪了，感觉整个身体都在那里放松了。',
13 |       '哈哈哈，我喜欢的是和女孩子一起玩，因为男女搭配，干活不累嘛。',
14 |       '我没啥爱好，唯一的爱好就是宅。',
15 |       '我喜欢看动漫，更喜欢日漫，我可是一个二次元哦。',
16 |       '我喜欢cosplay，喜欢cos动漫里的每一个角色。'
17 |     ]
18 |     return this.pick(likes)
19 |   }
20 | })
21 | Mock.Random.extend({
22 |   address: function () {
23 |     const address = [
24 |       '深圳市南山区科技园南区R2-B三楼',
25 |       '深圳南山区科技园汇景豪苑海欣阁',
26 |       '深圳市南山区白石洲中信红树湾',
27 |       '上海市普陀区金沙江路 1517 弄',
28 |       '四川成都市中德英伦联邦C区',
29 |       '北京市中南海老四合院靠左',
30 |       '广州市中心中央银行33号'
31 |     ]
32 |     return this.pick(address)
33 |   }
34 | })


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <el-container>
 4 |       <el-header>
 5 |         <v-header></v-header>
 6 |       </el-header>
 7 |       <el-container class="v-container">
 8 |         <el-aside width="200px">
 9 |           <v-aside></v-aside>
10 |         </el-aside>
11 |         <el-main>
12 |           <v-main></v-main>
13 |         </el-main>
14 |       </el-container>
15 |     </el-container>
16 |   </div>
17 | </template>
18 | 
19 | <script>
20 | import Header from '@/components/Header.vue'
21 | import Aside from '@/components/Aside.vue'
22 | import Main from '@/components/Main.vue'
23 | 
24 | export default {
25 |   name: 'Home',
26 |   components: {
27 |     'v-header': Header,
28 |     'v-aside': Aside,
29 |     'v-main': Main
30 |   }
31 | }
32 | </script>
33 | 
34 | <style lang="less" scoped>
35 | .home {
36 |   height: 100%;
37 | }
38 | .el-container {
39 |   height: 100%;
40 | }
41 | .v-container {
42 |   height: calc(100% - 60px);
43 | }
44 | .el-header {
45 |   padding: 0;
46 |   z-index: 9;
47 | }
48 | .el-aside {
49 |   height: 100%;
50 |   background-color: #00BFFF;
51 | }
52 | .el-main {
53 |   height: 100%;
54 |   background-color: #eee;
55 |   .main {
56 |     height: 100%;
57 |     overflow: hidden;
58 |   }
59 | }
60 | </style>
61 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "permission-demo",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "animate.css": "^4.1.0",
12 |     "axios": "^0.19.2",
13 |     "core-js": "^3.6.5",
14 |     "element-ui": "^2.4.5",
15 |     "vue": "^2.6.11",
16 |     "vue-router": "^3.2.0",
17 |     "vuex": "^3.4.0"
18 |   },
19 |   "devDependencies": {
20 |     "@vue/cli-plugin-babel": "~4.4.0",
21 |     "@vue/cli-plugin-eslint": "~4.4.0",
22 |     "@vue/cli-plugin-router": "~4.4.0",
23 |     "@vue/cli-plugin-vuex": "~4.4.0",
24 |     "@vue/cli-service": "~4.4.0",
25 |     "@vue/eslint-config-standard": "^5.1.2",
26 |     "babel-eslint": "^10.1.0",
27 |     "babel-plugin-component": "^1.1.1",
28 |     "eslint": "^6.7.2",
29 |     "eslint-plugin-import": "^2.20.2",
30 |     "eslint-plugin-node": "^11.1.0",
31 |     "eslint-plugin-promise": "^4.2.1",
32 |     "eslint-plugin-standard": "^4.0.0",
33 |     "eslint-plugin-vue": "^6.2.2",
34 |     "less": "^3.0.4",
35 |     "less-loader": "^5.0.0",
36 |     "mockjs": "^1.1.0",
37 |     "vue-cli-plugin-element": "~1.0.1",
38 |     "vue-template-compiler": "^2.6.11"
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | import Home from '../views/Home.vue'
 4 | import Login from '../views/Login.vue'
 5 | import NotFound from '../views/NotFound.vue'
 6 | 
 7 | Vue.use(VueRouter)
 8 | const routes = [
 9 |   {
10 |     path: '/',
11 |     name: 'Home',
12 |     component: Home,
13 |     redirect: '/menu/one',
14 |     children: [
15 |       {
16 |         path: '/menu/one',
17 |         component: () => import('@/views/Page1.vue')
18 |       }, {
19 |         path: '/menu/two',
20 |         component: () => import('@/views/Page1.vue')
21 |       }, {
22 |         path: '/menu/three',
23 |         component: () => import('@/views/Page1.vue')
24 |       }, {
25 |         path: '/menu/four',
26 |         component: () => import('@/views/Page1.vue')
27 |       }, {
28 |         path: '/menu/five',
29 |         component: () => import('@/views/Page1.vue')
30 |       }
31 |     ]
32 |   },
33 |   {
34 |     path: '/login',
35 |     name: 'Login',
36 |     component: Login
37 |   },
38 |   {
39 |     path: '*',
40 |     name: 'NotFound',
41 |     component: NotFound
42 |   }
43 | ]
44 | 
45 | const router = new VueRouter({
46 |   routes
47 | })
48 | 
49 | const originalPush = VueRouter.prototype.push
50 | // 重写了原型上的push方法，统一的处理了错误信息
51 | VueRouter.prototype.push = function push (location) {
52 |   return originalPush.call(this, location).catch(err => err)
53 | }
54 | 
55 | export default router
56 | 


--------------------------------------------------------------------------------
/src/components/Aside.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="aside">
 3 |     <el-menu
 4 |       background-color="#00BFFF"
 5 |       text-color="#fff"
 6 |     >
 7 |       <el-submenu class="nav-title" index="1">
 8 |         <template slot="title">
 9 |           <i class="el-icon-location"></i>
10 |           <span slot="title">导航一</span>
11 |         </template>
12 |         <el-menu-item @click="$router.push({ path: '/menu/one', query: { name: '菜单栏1' }})">菜单栏1</el-menu-item>
13 |         <el-menu-item @click="$router.push({ path: '/menu/two', query: { name: '菜单栏2' }})">菜单栏2</el-menu-item>
14 |         <el-menu-item @click="$router.push({ path: '/menu/three', query: { name: '菜单栏3' }})">菜单栏3</el-menu-item>
15 |       </el-submenu>
16 |       <el-submenu class="nav-title" index="2">
17 |         <template slot="title">
18 |           <i class="el-icon-location"></i>
19 |           <span slot="title">导航二</span>
20 |         </template>
21 |         <el-menu-item @click="$router.push({ path: '/menu/four', query: { name: '菜单栏4' }})">菜单栏4</el-menu-item>
22 |         <el-menu-item @click="$router.push({ path: '/menu/five', query: { name: '菜单栏5' }})">菜单栏5</el-menu-item>
23 |       </el-submenu>
24 |     </el-menu>
25 |   </div>
26 | </template>
27 | 
28 | <script>
29 | export default {
30 | 
31 | }
32 | </script>
33 | 
34 | <style lang="less" scoped>
35 | .nav-title {
36 |   & /deep/ i {
37 |     color: #fff;
38 |   }
39 |   .el-menu-item {
40 |     color: #fff;
41 |   }
42 | }
43 | </style>
44 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ### 介绍
 2 | 
 3 | > 这是一个用来练习Vue后台权限管理的简单模板，是我看了一个[B站视频](https://www.bilibili.com/video/BV15Q4y1K79c?t=5306)时，苦于没资料，于是自己花了点时间搭了一个，这里做来分享，分为两版：
 4 | 
 5 | * 基础模板：有基本操作，mock等功能了，没实现权限判定；
 6 | * 实现模板：基于基础模板做了权限的判定。
 7 | 
 8 | ### 安装&运行
 9 | 
10 | 1. 克隆项目
11 | 
12 |    `git clone git@github.com:Aizener/admin-permission.git`
13 | 
14 |    这个直接把基础模板和实现的模板都克隆下来的，develop的是基础模板，master的实现模板。
15 | 
16 | 2. 安装依赖：
17 | 
18 |    执行：`yarn`或者`yarn install`；
19 | 
20 | 3. 基础模板：
21 | 
22 |    基础模板在`develop`分支，可以通过`git checkout develop`来切换；
23 | 
24 | 4. 实现模板：
25 | 
26 |    基础模板在`master`分支， 可以通过`git checkout master`来切换；
27 | 
28 | 5. 启动服务
29 | 
30 |    `yarn serve`
31 | 
32 | 6. 效果图：
33 | 
34 |    <img src="https://cdn.jsdelivr.net/gh/aizener/my-imgs@master/permission-demo.png" width="1000px" />
35 | 
36 | ### 基本实现
37 | 
38 | 这里说一下这个Demo的实现，通过什么技术，用的哪些知识点完成开发。以及，关于对于权限管理的一些理解与实现，大体分为以下几类：
39 | 
40 | #### 视图
41 | 
42 | 模板是通过[ElementUI](https://element.eleme.cn/)来搭建的，这个基于的UI组件库非常好用。
43 | 
44 | #### 数据Mock
45 | 
46 | 数据是通过[mockjs](http://mockjs.com/)来实现的，但是因为这个库好像不能模仿响应状态码，不过用起来还是挺方便的。
47 | 
48 | #### 请求
49 | 
50 | 请求数据的库，我使用的是[axios](http://www.axios-js.com/)这个库，这个库使用也非常的方便简单。
51 | 
52 | #### 数据保存
53 | 
54 | 数据的保存通过Vuex和sesstionStorage来实现的。
55 | 
56 | ### 权限判断
57 | 
58 | 基本实现知识完成了一些基本的东西，权限判断的话，前端主要是分为一下四类：
59 | 
60 | #### 路由级别的判定
61 | 
62 | 通过**beforeEach**全局守卫钩子，来进行token验证，是否能通过路由来登入其他页面；
63 | 
64 | #### 菜单级别的判定
65 | 
66 | 通过后端返回的`json`菜单权限数据，进行动态渲染，这里通过`router.addRoutes`动态添加菜单，没有的就不会出现了；
67 | 
68 | #### 元素级别的判定
69 | 
70 | 通过后端返回的`json`操作权限数据，绑定在`router`元信息上，再通过`this.$route.meta`在页面取出对应权限。再通过自定义指令的实现完成禁止、移除等。
71 | 
72 | #### 请求级别的判定
73 | 
74 | 通过axios的拦截器，判定某个用户在某个页面的操作是否有权限，通过`router.currentRoute`获取元信息来判定。
75 | 
76 | ### 补充（关于代码的一些东西）
77 | 
78 | 用户有两个，一个是普通用户，一个是管理员
79 | 
80 | - 普通用户用户名就是：普通用户，密码是：normal；
81 | - 管理员用户名就是：管理员，密码是：admin。
82 | 
83 | 权限判定的指令使用：
84 | 
85 | `v-permission.disabled="condition"` 如果condition为true，则禁用当前绑定指令的标签；
86 | 
87 | `v-permission.remove="condition"` 如果condition为true，则移除当前绑定指令的标签。
88 | 
89 | 结尾：大体就这些了，接口方面已经写好交互了。
90 | 


--------------------------------------------------------------------------------
/src/components/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="header">
 3 |     <div class="header-left">
 4 |       <div class="header-left__logo">
 5 |         <img src="@/assets/logo.png" alt="">
 6 |       </div>
 7 |       <div class="header-left__title">后台管理系统权限Demo</div>
 8 |     </div>
 9 |     <div class="header-right">
10 |       <div class="header-right__info">
11 |         <div class="header-right__info-name">{{ user.username }}</div>
12 |       </div>
13 |       <div class="header-right__logout">
14 |         <el-button type="danger" size="20" @click="logout">退出</el-button>
15 |       </div>
16 |     </div>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | import { mapState } from 'vuex'
22 | 
23 | export default {
24 |   methods: {
25 |     logout () {
26 |       this.$confirm('你是否要退出登录?', '登出', {
27 |         confirmButtonText: '确定',
28 |         cancelButtonText: '取消',
29 |         type: 'warning'
30 |       }).then(() => {
31 |         setTimeout(() => {
32 |           this.$router.push('/login')
33 |           window.location.reload()
34 |         }, 500)
35 |       }).catch(err => err)
36 |     }
37 |   },
38 |   computed: {
39 |     ...mapState(['user'])
40 |   }
41 | }
42 | </script>
43 | 
44 | <style lang="less" scoped>
45 | .header {
46 |   width: 100%;
47 |   height: 100%;
48 |   background-color: #00BFFF;
49 |   display: flex;
50 |   justify-content: space-between;
51 |   padding: 0 15px;
52 |   box-shadow: 0 2px 5px #00BFFF;
53 |   &-left {
54 |     height: 100%;
55 |     display: flex;
56 |     align-items: center;
57 |     &__logo {
58 |       width: 80px;
59 |       height: 100%;
60 |       padding: 5px;
61 |       & > img {
62 |         width: 100%;
63 |         height: 100%;
64 |       }
65 |     }
66 |     &__title {
67 |       font-size: 20px;
68 |       color: #fff;
69 |       text-shadow: 10px 10px rgba(25, 255, 255, .3);
70 |     }
71 |   }
72 |   &-right {
73 |     height: 100%;
74 |     display: flex;
75 |     align-items: center;
76 |     &__info {
77 |       &-name {
78 |         color: #F0FFFF;
79 |         font-size: 16px;
80 |         margin-right: 15px;
81 |       }
82 |     }
83 |   }
84 | }
85 | </style>
86 | 


--------------------------------------------------------------------------------
/src/views/Login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="login">
  3 |     <el-form :model="userData" :rules="rules" ref="form" v-loading="isLogin">
  4 |       <h2>用户登录</h2>
  5 |       <el-form-item prop="username">
  6 |         <label for="username">用户名</label>：
  7 |         <el-input id="username" v-model="userData.username" clearable>
  8 |           <template slot="prefix">
  9 |             <i class="el-icon-user"></i>
 10 |           </template>
 11 |         </el-input>
 12 |       </el-form-item>
 13 |       <el-form-item prop="password">
 14 |         <label for="password">密码</label>：
 15 |         <el-input id="password" v-model="userData.password"  show-password>
 16 |           <template slot="prefix">
 17 |             <i class="el-icon-menu"></i>
 18 |           </template>
 19 |         </el-input>
 20 |       </el-form-item>
 21 |       <el-form-item>
 22 |         <el-button @click="submitForm" type="primary">登录</el-button>
 23 |       </el-form-item>
 24 |     </el-form>
 25 |   </div>
 26 | </template>
 27 | 
 28 | <script>
 29 | import { mapMutations } from 'vuex'
 30 | 
 31 | export default {
 32 |   data () {
 33 |     return {
 34 |       userData: {
 35 |         username: '',
 36 |         password: ''
 37 |       },
 38 |       isLogin: false,
 39 |       rules: {
 40 |         username: [
 41 |           { required: true, min: 3, max: 18, message: '请输入3到18位的用户名', trigger: 'blur' }
 42 |         ],
 43 |         password: [
 44 |           { required: true, min: 3, max: 18, message: '请输入3到18位的密码', trigger: 'blur' }
 45 |         ]
 46 |       }
 47 |     }
 48 |   },
 49 |   methods: {
 50 |     ...mapMutations(['setUser']),
 51 |     submitForm () {
 52 |       this.$refs.form.validate(valid => {
 53 |         if (valid) {
 54 |           this.isLogin = true
 55 |           this.$api.login({
 56 |             username: this.userData.username,
 57 |             password: this.userData.password
 58 |           }).then(res => {
 59 |             this.isLogin = false
 60 |             if (!res.data) {
 61 |               this.$message({
 62 |                 message: '用户名或密码错误！',
 63 |                 type: 'error'
 64 |               })
 65 |               return false
 66 |             }
 67 |             this.setUser(res.data)
 68 |             this.$router.push('/')
 69 |           })
 70 |         }
 71 |         return false
 72 |       })
 73 |     }
 74 |   }
 75 | }
 76 | </script>
 77 | 
 78 | <style lang="less" scoped>
 79 | .login {
 80 |   width: 100%;
 81 |   height: 100%;
 82 |   background: skyblue;
 83 |   display: flex;
 84 |   justify-content: center;
 85 |   align-items: center;
 86 |   .el-form {
 87 |     padding: 15px 70px 0 70px;
 88 |     background: #fff;
 89 |     display: flex;
 90 |     justify-content: center;
 91 |     align-items: center;
 92 |     flex-direction: column;
 93 |     border-radius: 10px;
 94 |     box-shadow: 5px 5px 10px rgba(255, 255, 255, .5);
 95 |     h2 {
 96 |       margin-bottom: 35px;
 97 |       text-shadow: 10px 10px 2px #ccc;;
 98 |     }
 99 |     .el-input {
100 |       width: 200px;
101 |     }
102 |     label {
103 |       width: 50px;
104 |       display: inline-block;
105 |       text-align: justify;
106 |       text-align-last: justify;
107 |     }
108 |     .el-form-item {
109 |       width: 100%;
110 |       text-align: right;
111 |       & /deep/ .el-form-item__error {
112 |         left: 69px;
113 |       }
114 |     }
115 |   }
116 | }
117 | </style>


--------------------------------------------------------------------------------
/src/components/main/Card.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="card animate__animated animate__zoomIn" v-loading="isOperate">
  3 |     <div class="card-header">
  4 |       <div class="card-header__title">
  5 |         {{ isAdd ? '添加信息' : '删除信息' }}
  6 |       </div>
  7 |       <div class="card-header__close" @click="$emit('close')">
  8 |         <i class="el-icon-close"></i>
  9 |       </div>
 10 |     </div>
 11 |     <div class="card-content">
 12 |       <el-form :model="formData" :rules="rules" ref="form">
 13 |         <el-form-item label="姓名：" prop="name">
 14 |           <el-input v-model="formData.name"></el-input>
 15 |         </el-form-item>
 16 |         <el-form-item label="地址：" prop="address">
 17 |           <el-input v-model="formData.address"></el-input>
 18 |         </el-form-item>
 19 |         <el-form-item label="爱好：" prop="likes">
 20 |           <el-input  v-model="formData.likes"></el-input>
 21 |         </el-form-item>
 22 |         <el-form-item>
 23 |           <el-button @click="$emit('close')" type="info">取消</el-button>
 24 |           <el-button @click="submitForm" type="primary">{{ isAdd ? '添加' : '修改' }}</el-button>
 25 |         </el-form-item>
 26 |       </el-form>
 27 |     </div>
 28 |   </div>
 29 | </template>
 30 | 
 31 | <script>
 32 | export default {
 33 |   props: {
 34 |     isAdd: Boolean,
 35 |     isOperate: Boolean,
 36 |     rowData: {
 37 |       type: Object,
 38 |       default () {
 39 |         return {}
 40 |       }
 41 |     }
 42 |   },
 43 |   data () {
 44 |     return {
 45 |       formData: {
 46 |         name: '',
 47 |         address: '',
 48 |         likes: ''
 49 |       },
 50 |       rules: {
 51 |         name: { required: true, message: '请输入姓名', trigger: 'blur' },
 52 |         address: { required: true, message: '请输入地址', trigger: 'blur' },
 53 |         likes: { required: true, message: '请输入爱好', trigger: 'blur' }
 54 |       }
 55 |     }
 56 |   },
 57 |   created () {
 58 |     if (Object.keys(this.rowData).length && !this.isAdd) {
 59 |       this.formData = { ...this.rowData }
 60 |     } else {
 61 |       this.formData = {
 62 |         name: '',
 63 |         address: '',
 64 |         likes: ''
 65 |       }
 66 |     }
 67 |   },
 68 |   methods: {
 69 |     submitForm () {
 70 |       this.$refs.form.validate(valid => {
 71 |         if (valid) {
 72 |           this.$emit('submitAction', {
 73 |             isAdd: this.isAdd,
 74 |             rowData: this.formData
 75 |           })
 76 |         }
 77 |       })
 78 |     }
 79 |   }
 80 | }
 81 | </script>
 82 | 
 83 | <style lang="less" scoped>
 84 | .card {
 85 |   position: fixed;
 86 |   left: 50%;
 87 |   top: 50%;
 88 |   transform: translate(-50%, -50%);
 89 |   transform-origin: 0 0;
 90 |   z-index: 99;
 91 |   background: #fff;
 92 |   box-shadow: 0 0 20px gray;
 93 |   border-radius: 5px;
 94 |   padding: 15px 80px;
 95 |   &-header {
 96 |     display: flex;
 97 |     justify-content: space-between;
 98 |     margin: 0 -50px 30px;
 99 |     &__title {
100 |       font-size: 20px;
101 |     }
102 |     &__close {
103 |       cursor: pointer;
104 |       transition: all .5s;
105 |       &:hover {
106 |         transform: rotate(-15deg);
107 |       }
108 |     }
109 |   }
110 |   .el-form-item {
111 |     display: flex;
112 |     &:last-child {
113 |       display: block;
114 |       text-align: right;
115 |     }
116 |   }
117 |   .el-input {
118 |     width: 200px;
119 |   }
120 | }
121 | .animate__animated.animate__zoomIn {
122 |   --animate-duration: .8s;
123 | }
124 | </style>


--------------------------------------------------------------------------------
/src/mock/index.js:
--------------------------------------------------------------------------------
  1 | // 使用 Mock
  2 | const Mock = require('mockjs')
  3 | require('./my-radom')
  4 | const Random = Mock.Random
  5 | Mock.setup({
  6 |   timeout: '500-1000'
  7 | })
  8 | 
  9 | const list = []
 10 | 
 11 | for (let i = 0; i < 20; i++) {
 12 |   list.push({
 13 |     id: i + 1,
 14 |     date: Random.date(),
 15 |     name: Random.cname(),
 16 |     address: Random.address(),
 17 |     likes: Random.likes()
 18 |   })
 19 | }
 20 | 
 21 | const users = [
 22 |   {
 23 |     id: 1,
 24 |     username: '普通用户',
 25 |     password: 'normal',
 26 |     token: 'abcdefghijklmnopqrstuvwxyz',
 27 |     rights: [{
 28 |       id: 1,
 29 |       authName: '一级菜单',
 30 |       icon: 'icon-menu',
 31 |       children: [{
 32 |         id: 11,
 33 |         authName: '一级项目1',
 34 |         path: '/',
 35 |         rights: ['view', 'edit', 'add', 'delete']
 36 |       }, {
 37 |         id: 11,
 38 |         authName: '一级项目2',
 39 |         path: '/',
 40 |         rights: ['view']
 41 |       }]
 42 |     }]
 43 |   },
 44 |   {
 45 |     id: 2,
 46 |     username: '管理员',
 47 |     password: 'admin',
 48 |     token: 'abcdefghijklmnopqrstuvwxyz'.split('').reverse().join(''),
 49 |     rights: [{
 50 |       id: 1,
 51 |       authName: '一级菜单',
 52 |       icon: 'icon-menu',
 53 |       children: [{
 54 |         id: 11,
 55 |         authName: '一级项目1',
 56 |         path: '/',
 57 |         rights: ['view', 'edit', 'add', 'delete']
 58 |       }, {
 59 |         id: 11,
 60 |         authName: '一级项目2',
 61 |         path: '/',
 62 |         rights: ['view', 'edit', 'add', 'delete']
 63 |       }]
 64 |     }, {
 65 |       id: 2,
 66 |       authName: '二级菜单',
 67 |       icon: 'icon-menu',
 68 |       children: [{
 69 |         id: 22,
 70 |         authName: '二级项目1',
 71 |         path: '/',
 72 |         rights: ['view', 'edit', 'add', 'delete']
 73 |       }]
 74 |     }]
 75 |   }
 76 | ]
 77 | 
 78 | // 获取列表
 79 | Mock.mock('/list', 'get', options => {
 80 |   const { current } = JSON.parse(options.body)
 81 |   return list.slice(((current - 1) * 10), current * 10)
 82 | })
 83 | 
 84 | // 总数
 85 | Mock.mock('/list/total', 'get', () => {
 86 |   return list.length
 87 | })
 88 | 
 89 | // 查询
 90 | Mock.mock('/list/value', 'get', options => {
 91 |   const { value } = JSON.parse(options.body)
 92 |   const _list = list.filter(item => {
 93 |     if (item.name.includes(value) || item.address.includes(value) || item.likes.includes(value)) {
 94 |       return true
 95 |     }
 96 |     return false
 97 |   })
 98 |   return {
 99 |     list: _list,
100 |     total: _list.length
101 |   }
102 | })
103 | 
104 | // 添加
105 | Mock.mock('/list/add', 'post', options => {
106 |   const { rowData } = JSON.parse(options.body)
107 |   rowData.id = list[list.length - 1].id + 1
108 |   rowData.date = new Date().toLocaleDateString().replace(/\//g, '-')
109 |   list.unshift(rowData)
110 |   return rowData
111 | })
112 | 
113 | // 修改
114 | Mock.mock('/list/update', 'put', options => {
115 |   const { rowData } = JSON.parse(options.body)
116 |   let _rowData = {}
117 |   list.forEach((item, idx) => {
118 |     if (item.id === rowData.id) {
119 |       _rowData = rowData
120 |       list[idx] = rowData
121 |     }
122 |   })
123 |   return _rowData
124 | })
125 | 
126 | // 删除
127 | Mock.mock('/list/delete', 'delete', options => {
128 |   const { id } = JSON.parse(options.body)
129 |   const index = list.findIndex(item => item.id === id)
130 |   const item = index > 0 ? list[index] : {}
131 |   list.splice(index, 1)
132 |   return item
133 | })
134 | 
135 | // 用户登录
136 | Mock.mock('/login', 'post', options => {
137 |   const { username, password } = JSON.parse(options.body)
138 |   const user = users.find(item => {
139 |     return item.username === username && item.password === password
140 |   })
141 |   return user
142 | })


--------------------------------------------------------------------------------
/src/views/Page1.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="page">
  3 |     <v-card :isOperate="isOperate" v-if="cardShow" @close="cardShow = false" @submitAction="submitAction" :isAdd="isAdd" :rowData="rowData"></v-card>
  4 |     <v-top-bar @show="showAddCard" @handleSearch="handleSearch"></v-top-bar>
  5 |     <el-table
  6 |       :data="tableData"
  7 |       v-loading="loading"
  8 |       border>
  9 |       <el-table-column
 10 |         type="index"
 11 |         label="#"
 12 |         width="50">
 13 |       </el-table-column>
 14 |       <el-table-column
 15 |         prop="date"
 16 |         label="日期"
 17 |         width="180">
 18 |       </el-table-column>
 19 |       <el-table-column
 20 |         prop="name"
 21 |         label="姓名"
 22 |         width="180">
 23 |       </el-table-column>
 24 |       <el-table-column
 25 |         prop="address"
 26 |         label="地址">
 27 |       </el-table-column>
 28 |       <el-table-column
 29 |         prop="likes"
 30 |         label="爱好">
 31 |       </el-table-column>
 32 |       <el-table-column
 33 |         label="操作"
 34 |         width="200"
 35 |       >
 36 |         <template v-slot:default="scope">
 37 |           <div class="btns">
 38 |             <el-button type="primary" @click="handleUpdate(scope)">
 39 |               <i class="el-icon-edit"></i>
 40 |             </el-button>
 41 |             <el-button type="danger" @click="handleDelete(scope)">
 42 |               <i class="el-icon-delete"></i>
 43 |             </el-button>
 44 |           </div>
 45 |         </template>
 46 |       </el-table-column>
 47 |     </el-table>
 48 |     <el-pagination
 49 |       class="pagi"
 50 |       background
 51 |       layout="prev, pager, next"
 52 |       :total="total"
 53 |       @current-change="sizeChange"
 54 |     >
 55 |     </el-pagination>
 56 |   </div>
 57 | </template>
 58 | 
 59 | <script>
 60 | import TopBar from '@/components/main/TopBar.vue'
 61 | import Card from '@/components/main/Card.vue'
 62 | import { mapMutations } from 'vuex'
 63 | 
 64 | export default {
 65 |   data () {
 66 |     return {
 67 |       tableData: [],
 68 |       page: {
 69 |         size: 10,
 70 |         current: 1
 71 |       },
 72 |       total: 0,
 73 |       loading: false,
 74 |       title: '添加用户',
 75 |       cardShow: false,
 76 |       isAdd: true,
 77 |       rowData: {},
 78 |       isOperate: false
 79 |     }
 80 |   },
 81 |   methods: {
 82 |     ...mapMutations(['addBread']),
 83 |     sizeChange (data) {
 84 |       this.page.current = data
 85 |       this.getList(this.page.current)
 86 |     },
 87 |     initData () {
 88 |       this.getList(this.page.current)
 89 |       this.getTotal()
 90 |     },
 91 |     showAddCard () {
 92 |       this.isAdd = true
 93 |       this.cardShow = true
 94 |     },
 95 |     submitAction (info) {
 96 |       // 添加或修改项目
 97 |       this.isOperate = true
 98 |       if (info.isAdd) {
 99 |         this.$api.addList({
100 |           rowData: info.rowData
101 |         }).then(() => {
102 |           this.initData()
103 |           this.cardShow = false
104 |           this.isOperate = false
105 |           this.$message({
106 |             message: '添加成功！',
107 |             type: 'success',
108 |             customClass: 'v-message',
109 |             offset: 100
110 |           })
111 |         })
112 |       } else {
113 |         this.$api.updateList({
114 |           rowData: info.rowData
115 |         }).then(() => {
116 |           this.initData()
117 |           this.cardShow = false
118 |           this.isOperate = false
119 |           this.$message({
120 |             message: '修改成功！',
121 |             type: 'success',
122 |             customClass: 'v-message',
123 |             offset: 100
124 |           })
125 |         })
126 |       }
127 |     },
128 |     handleSearch (value) {
129 |       if (value === '') {
130 |         this.getList(1)
131 |         return
132 |       }
133 |       this.loading = true
134 |       this.$api.getListByValue({
135 |         value
136 |       }).then(res => {
137 |         this.loading = false
138 |         this.tableData = res.data.list
139 |         this.total = res.data.total
140 |       })
141 |     },
142 |     handleUpdate (scope) {
143 |       this.isAdd = false
144 |       this.cardShow = true
145 |       this.rowData = scope.row
146 |     },
147 |     handleDelete (scope) {
148 |       this.$confirm('你确定要删除这一条数据吗？', '警告', {
149 |         confirmButtonText: '确定',
150 |         cancelButtonText: '取消',
151 |         type: 'danger'
152 |       }).then(() => {
153 |         this.$api.deleteList({
154 |           id: scope.row.id
155 |         }).then(res => {
156 |           this.initData()
157 |           this.$message({
158 |             message: '删除成功！',
159 |             type: 'success',
160 |             customClass: 'v-message',
161 |             offset: 100
162 |           })
163 |         })
164 |       }).catch(err => err)
165 |     },
166 |     getList (current) {
167 |       this.loading = true
168 |       this.$api.getList({
169 |         current
170 |       }).then(res => {
171 |         this.tableData = res.data
172 |         this.loading = false
173 |         document.querySelector('.page').scrollTop = 0
174 |       })
175 |     },
176 |     getTotal () {
177 |       this.$api.getTotal().then(res => {
178 |         this.total = res.data
179 |       })
180 |     }
181 |   },
182 |   created () {
183 |     if (this.$route.query.name) {
184 |       this.addBread({
185 |         name: this.$route.query.name,
186 |         path: this.$route.path
187 |       })
188 |     }
189 |     this.initData()
190 |   },
191 |   components: {
192 |     'v-top-bar': TopBar,
193 |     'v-card': Card
194 |   }
195 | }
196 | </script>
197 | 
198 | <style lang="less">
199 | .page {
200 |   height: 100%;
201 |   overflow-y: scroll;
202 | }
203 | .el-table {
204 |   transform: translateY(15px);
205 | }
206 | .pagi {
207 |   margin: 30px 0;
208 |   text-align: center;
209 | }
210 | .v-message {
211 |   left: 58%;
212 | }
213 | </style>


--------------------------------------------------------------------------------