feat(vue): 新增权限拦截vue示例

新增vue示例权限拦截

README.md

@@ -12,3 +12,4 @@
 |html2pdf|web/src/plugin/html2pdf.js|
 |mock.js|web/mock/test/line.js|
 |mock数据生成器|html_test/CodeMirror.html|
+|git-hooks|git-hooks/verify-commit-msg.js|

css_test/base/position.html

@@ -11,15 +11,15 @@
             width: 100px;
             height: 100px;
         }
-        span {
+        #div2 {
             position: absolute;
             /*水平垂直居中*/
-            left: 0;
-            right: 0;
-            top: 0;
-            bottom: 0;
-            margin: auto;
-            border: 1px solid blue;
+            /*left: 0;*/
+            /*right: 0;*/
+            /*top: 0;*/
+            /*bottom: 0;*/
+            /*margin: auto;*/
+            /*border: 1px solid blue;*/
             background-color: blue;
             width: 100px;
             height: 100px;
@@ -30,6 +30,6 @@
     <!-- 对于position值不为static的第一位祖先元素来定位（未找到，则相对body元素），在正常流中的位置不在存在，脱离文档流； -->
     <!-- 单独设置position: absolute;可以变成块元素 -->
     <div id="div1"></div>
-    <span id="div2"></span>
+    <div id="div2"></div>
 </body>
 </html>

web/mock/login.json

@@ -0,0 +1,6 @@
+{
+  "status": "success",
+  "content": {
+    "Authorization": "xxxxxx"
+  }
+}

web/mock/routers.json

@@ -0,0 +1,4 @@
+{
+  "status": "success",
+  "content": []
+}

web/mock/server.js

@@ -19,11 +19,13 @@ app.use(async (ctx) => {
   let filePath = path.join(__dirname, ctx.request.path.replace('/api/', '').replace('/query', '').replace('/delete', ''))
   let data
 
-  if (fs.existsSync(filePath)) {
+  console.log(filePath, fs.existsSync(filePath))
+  if (fs.existsSync(filePath  + '.json')) {
     data = jsonfile.readFileSync(filePath + '.json')
   } else {
     data = require(filePath).data
   }
+
   ctx.set('Content-Type', 'application/json')
   ctx.body = data
 })

web/package.json

@@ -7,7 +7,8 @@
   "scripts": {
     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
     "start": "npm run dev",
-    "build": "node build/build.js"
+    "build": "node build/build.js",
+    "mock": "nodemon mock/server.js"
   },
   "dependencies": {
     "axios": "^0.18.0",

web/src/directive/auth.js

@@ -0,0 +1,21 @@
+/**
+ * Created by ligang on 2018/5/15.
+ */
+import Vue from 'vue'
+
+Vue.directive('auth', {
+  // bind(el, binding, vnode) {
+  //   let {value} = binding
+  //   if(value) {
+  //     Vue.nextTick(() => {
+  //       el.parentNode.removeChild(el)
+  //     }, 0)
+  //   }
+  // }
+  inserted(el, binding, vnode) {
+    let {value} = binding
+    if(value) {
+      el.parentNode.removeChild(el)
+    }
+  }
+})

web/src/main.js

@@ -1,7 +1,7 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
-import App from './App'
+
 import router from './router'
 import ElementUI from 'element-ui'
 
@@ -10,6 +10,8 @@ import 'element-ui/lib/theme-chalk/index.css'
 import CommonComponent from '@/components'
 import request from '@/plugin/request.js'
 
+import '@/directive/auth.js'
+
 Vue.config.productionTip = false
 
 Vue.use(ElementUI)
@@ -20,6 +22,6 @@ Vue.use(request, {isReqInterceptor: true}) // 请求插件
 new Vue({
   el: '#app',
   router,
-  template: '<App/>',
-  components: { App }
+  template: '<router-view></router-view>'
+  // components: { App }
 })

web/src/plugin/request.js

@@ -17,7 +17,7 @@ export default {
      * 发送请求前拦截
      */
     isReqInterceptor && axios.interceptors.request.use(req => {
-      req.headers.Authorization = 'token'
+      req.headers.Authorization = window.localStorage.Authorization
       return req;
     }, error => {
       return Promise.reject(error);

web/src/router/es6.js

@@ -1,21 +1,4 @@
 /**
  * Created by ligang on 2018/1/6.
  */
-
-import index from '@/views/es6/index.vue'
-
-import myModule from '@/views/es6/my-module/person.vue'
-import myModule2 from '@/views/es6/my-module/person2.vue'
-
-
-export default {
-  path: '/es6',
-  component: index,
-  children: [{
-    path: 'module-p1',
-    component: myModule
-  },{
-    path: 'module-p2',
-    component: myModule2
-  }]
-}
+export default {}

web/src/router/index.js

@@ -5,22 +5,37 @@ import es6 from '@/router/es6.js'
 import vue from '@/router/vue.js'
 import echarts from '@/router/echarts.js'
 
+import App from '@/App.vue'
 import index from '@/views/index'
 
+import login from '@/views/login/login.vue'
+
 Vue.use(Router)
 
 const routes = [
   {
+    path: '/login',
+    name: 'login',
+    component: login
+  },  {
     path: '/',
-    name: 'index',
-    component: index
-  },
-  es6,
-  vue,
-  echarts
+    component: App,
+    redirect: 'index',
+    children: [
+      {
+        path: 'index',
+        name: 'index',
+        component: index
+      },
+      // es6,
+      vue,
+      echarts
+    ]
+  }
 ]
 
 export default new Router({
   mode: 'history',
   routes
 })
+export {routes}

web/src/views/login/login.vue

@@ -0,0 +1,81 @@
+<template>
+    <div>
+        <el-row>
+            <el-col :span="6" :offset="9">
+                <label for="username">
+                    <el-input type="input" id="username" name="username" v-model="user.username"></el-input>
+                </label>
+            </el-col>
+        </el-row>
+        <el-row>
+            <el-col :span="6" :offset="9">
+                <label for="password">
+                    <el-input type="password" id="password" name="password" v-model="user.password"></el-input>
+                </label>
+            </el-col>
+        </el-row>
+        <el-row>
+            <el-col :span="6" :offset="11" type="flex">
+                <el-button @click="login">登录</el-button>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script>
+  import {routes} from '@/router'
+  export default {
+    name: '',
+    data() {
+      return {
+        user: {
+          username: '',
+          password: ''
+        }
+      }
+    },
+    methods: {
+      login() {
+        this.$request({
+          method: 'post',
+          url: '/api/login',
+          data: {
+            ...this.user
+          }
+        }).then(({Authorization}) => {
+          window.localStorage.Authorization = Authorization
+          // 获取当前用户的路由情况
+          this.getRouters()
+
+        })
+      },
+      getRouters() {
+        this.$request({
+          method: 'post',
+          url: '/api/routers',
+          data: {
+            ...this.user
+          }
+        }).then(data => {
+          routes[1].children.push({
+            path: '/es6',
+            component: resolve => require(['@/views/es6/index.vue'], resolve),
+            children: [{
+                  path: 'module-p1',
+                  component: resolve => require(['@/views/es6/my-module/person.vue'], resolve),
+                },{
+                  path: 'module-p2',
+                  component: resolve => require(['@/views/es6/my-module/person2.vue'], resolve),
+                }]
+            })
+          this.$router.addRoutes(routes)
+          this.$router.push('/es6')
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

web/src/views/vue/attrs.vue

@@ -1,36 +1,65 @@
 <template>
     <div>
         <child
-                name="ligang"
-                age="28"
-                :address="address"
-                :style="myStyle"
-                @m1="m1"
-                @click="m2"
-                @keydown.natvie="m3">
-        </child>
+            name="ligang"
+            age="28"
+            :address="address"
+            :style="myStyle"
+            @m1="m1"
+            @click.natvie="m2"
+            @keydown.natvie="m3">
+    </child>
+
+        <Auth-Comp :auth="true">
+            <div>123</div>
+            <span slot="abc" class="123">21221</span>
+            <div @click="getX()">{{xxxx}}</div>
+        </Auth-Comp>
+
+        <Auth-Comp>
+            <div>456</div>
+        </Auth-Comp>
+
+
+        <template v-auth="true">
+            <div style="background-color: #00b3ee">123</div>
+            <span slot="abc">21221</span>
+            <div>42343</div>
+        </template>
+
+        <div v-auth="false">
+            <div style="background-color: #00b3ee">456</div>
+        </div>
+
     </div>
 </template>
 
 <script>
     import Child from './child.vue'
+    import AuthComp from './render.vue'
     export default {
       props: [],
       data() {
         return {
           address: '山东省',
           myStyle: {
             color: 'red'
-          }
+          },
+          xxxx: 'xxxxx'
         }
       },
       methods: {
         m1(event) {console.log('m1', event)},
         m2(event) {console.log('m2', event)},
-        m3(event) {console.log('m3', event)}
+        m3(event) {console.log('m3', event)},
+
+        getX() {
+          console.log('xxxxx')
+        }
       },
       components: {
-        Child
+        Child,
+        AuthComp
       }
     }
 </script>

web/src/views/vue/render.vue

@@ -0,0 +1,19 @@
+<script>
+  export default {
+    name: 'Auth-Comp',
+    functional: true,
+    // 增加了context来弥补缺少的实例
+    render: function(createElement, context) {
+        console.log(context.slots())
+        let {props, children, data} = context
+
+        return children
+
+        if(props.auth) {
+          return createElement('div', data, children)
+        } else {
+          return null
+        }
+    }
+  }
+</script>