vue-router如何根據不同的用戶給不同的權限

閑聊：   

小穎去年在上家公司用的vue1.0之前在做路由這塊用的router.map，但是現在vue2.0里已經不能用了，所以之前解決權限問題的例子，小穎也參考不了嗚嗚

     之前看一個美女寫的：elememtui(有關權限的那些事) 小穎也想試試怎么根據不同的用戶，給不同的訪問菜單權限，昨天下午小穎試了好久，都沒弄好，用戶剛登陸進去菜單欄是好的，但是當頁面一刷新，左側的菜單就不見了，但當小穎點擊了別的地方后，左側的菜單欄又能出來了，阿西吧擦，昨天折騰了小穎一下午，在下班前還是沒弄好，回去因為才搬了家房子亂的得收拾房間，所以也就沒帶電腦回去，早上來竟然弄好啦弄好啦弄好啦嘻嘻嘻，下面我們就一起來看看小穎寫的代碼吧嘻嘻。

效果圖：

        

項目是基於小穎之前寫的那個demo來寫的這里小穎就只把重要的代碼給大家粘出來，剩下的大家請移駕到：vue2.0+element+node+webpack搭建的一個簡單的后台管理界面    來看其他的代碼。

     更新后的項目目錄：

               

注意：小穎之前沒有用到es6，現在小穎引了es6，具體怎么引請看這里：webpack es6支持配置 

              如果遇到問題：Vue2.0 新手完全填坑攻略—從環境搭建到發布——DT

新建json文件：

permissions.json

{
    "uesername": "admin",
    "password": "123456",
    "menu": [{
        "name": "導航一",
        "path": "/",
        "children": [{
            "path": "/menutab",
            "name": "Tab"
        }]
    }, {
        "name": "導航三",
        "path": "/",
        "children": [{
            "path": "/progress",
            "name": "Progress"
        }, {
            "path": "/form",
            "name": "form"
        }]
    }]
}

menuForm.vue

<template lang="html">
  <div class="menu-form">
    <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="年齡" prop="age"
      :rules="[
      { required: true, message: '年齡不能為空'},
      { type: 'number', message: '年齡必須為數字值'}]">
      <el-input type="age" v-model.number="numberValidateForm.age" auto-complete="off" class="demo-ruleForm-input"></el-input>
    </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
    <el-button @click="resetForm('numberValidateForm')">重置</el-button>
  </el-form-item>
</el-form>
  </div>
</template>

<script>
export default {
    data() {
        return {
            numberValidateForm: {
                age: ''
            }
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>

<style lang="css">
.demo-ruleForm-input{
  width: 300px;
}
</style>

progress.vue

<template lang="html">
  <div class="progress-content">
    <el-progress type="circle" :percentage="0"></el-progress>
    <el-progress type="circle" :percentage="25"></el-progress>
    <el-progress type="circle" :percentage="100" status="success"></el-progress>
    <el-progress type="circle" :percentage="50" status="exception"></el-progress>
  </div>
</template>

<script>
export default {
}
</script>
<style lang="css">
</style>

rate.vue

<template lang="html">
  <div class="block">
    <span class="demonstration">區分顏色</span>
    <el-rate v-model="value2" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
</div>
</template>

<script>
export default {}
</script>

<style lang="css">
</style>

datePicker.vue

<template lang="html">
  <div class="date-picker">
    <div class="block">
      <span class="demonstration">帶快捷選項</span>
      <el-date-picker v-model="value2" align="right" type="date" placeholder="選擇日期" :picker-options="pickerOptions1">
      </el-date-picker>
    </div>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="css">
</style>

實現路由限制的代碼：

1.login.vue中將原來的handleSubmit2方法進行修改，通過ajax訪問本地json然后再判斷當前用戶是誰有什么權限，小穎這里只寫了一個admin，其實真是的數據里應該會有很多個用戶，然后大家再判斷當前登錄的用戶是誰，然后獲取相應的權限，這里小穎就不給大家演示了嘻嘻。

        handleSubmit2(ev) {
            var _this = this;
            _this.$refs.ruleForm2.validate((valid) => {
                if (valid) {
                    _this.logining = true;
                    var loginParams = {
                        username: this.ruleForm2.account,
                        password: this.ruleForm2.checkPass
                    };
                    _this.$http.get('/src/data/permissions.json').then(response => {
                        // get body data
                        var someData = JSON.parse(response.bodyText);
                        if (loginParams.username == someData.uesername && loginParams.password == someData.password) {
                            _this.logining = false;
                            sessionStorage.setItem('user', JSON.stringify(loginParams));
                            sessionStorage.setItem('menu', JSON.stringify(someData.menu));
                            _this.$router.push({
                                path: someData.menu[0].children[0].path
                            });
                        } else {
                            _this.logining = false;
                            _this.$alert('用戶名或密碼錯誤！', '提示信息', {
                                confirmButtonText: '確定'
                            });
                        }
                    }, response => {
                        // error callback
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }

2.home.vue中的mounted()方法更新為：

    mounted() {
        var user = sessionStorage.getItem('user');
        if (user) {
            user = JSON.parse(user);
            this.sysUserName = user.username || '';
        }
        var _this = this;
        _this.menuData = JSON.parse(sessionStorage.getItem("menu"));
        _this.$router.options.routes.forEach(function(item) {
            _this.menuData.forEach(function(menu) {
                if (item.name == menu.name) {
                    item.hidden = false;
                    if (menu.children && item.children) {
                        item.children.forEach(function(children1) {
                            menu.children.forEach(function(children2) {
                                if (children1.name == children2.name) {
                                    children1.hidden = false;
                                }
                            });
                        });
                    }
                }
            });
        });
    }