vue權(quán)限管理的實(shí)現(xiàn)（通過(guò)動(dòng)態(tài)路由添加菜單）

沒有比這個(gè)更全的了吧峡竣，哈哈哈哈哈哈哈，話不多說(shuō)篮奄，看代碼

一展氓、router文件下的index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home.vue'
import login from '../views/login.vue'
import index from '../views/index.vue'
import personal from '../views/personal.vue'
Vue.use(Router)
var router = new Router({
    routes:[
        {
            path: '/',
            redirect: '/Login'
        },
        {
            path: '/Login',
            name: 'Login',
            component: (resolve) => require(['@/views/login'],resolve)
        },
        {
            path: '/Home',
            name: 'Home',
            meta: {
                requireAuth: true
            },
            component: () => import( '@/views/Home'),
            // component:Home,
            children:[
                {
                    path: '/index',
                    name: 'index',
                    meta: {
                        requireAuth: true
                    },
                    component: () => import( '@/views/index')
                },
                {
                    path: '/personal',
                    name: 'personal',
                    component: (resolve) => require(['@/views/personal'],resolve)
                },
                {
                    path: '/orderDetail',
                    name: 'orderDetail',
                    component: (resolve) => require(['@/views/orderDetail'],resolve)
                }
            ]
        }
    ]
})
router.$addRoutes = (params) => {
  router.matcher = new Router({mode:'history'}).matcher
  router.addRoutes(params)
}

export default router

二穆趴、router文件下新建一個(gè)關(guān)于動(dòng)態(tài)路由的js文件(dongRouter.js)

import router from './index'
import store from './../store'
function createRouterDiGui (arr) {
    const subRoutes = []
    arr.forEach((item) => {
        if (item.componentPath === '') {
            subRoutes.push({
                path: item.menuurl,
                name: item.pathname,
                meta: { requireAuth: true, menuId: item.menuId }
            })
        } else {
            subRoutes.push({
                path: item.menuurl,
                name: item.pathname,
                meta: { requireAuth: true, menuId: item.menuId },
                component: resolve => require(['@/views/' + item.componentpath + ''], resolve)
            })
        }
        // 判斷是否有子數(shù)組
        if (item.menuChilds.length && item.menuChilds.length > 0) {
            //如果有子菜單，則再次執(zhí)行創(chuàng)建路由方法（遞歸）
            subRoutes.push(...createRouterDiGui(item.menuChilds))
        }
    })
    return subRoutes
}

// 執(zhí)行動(dòng)態(tài)添加路由
function DynamicAddRouter () {
    let subRoutes = []
    subRoutes = createRouterDiGui(store.getters.getMenuInfo)
    router.options.routes[2].children.push(...subRoutes)
    console.log(router.options.routes[2].children)
    router.options.routes.push(
        {
            path: '*',
            name: '404',
            component: (resolve) => require(['@/views/Page404'], resolve)
        })
    console.log(router.options.routes)
    router.$addRoutes(router.options.routes)
}
export default {
    DynamicAddRouter: DynamicAddRouter
}

三遇汞、main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import dongRouter from './router/dongRouter'
import store from './store'
import Axios from 'axios'
import Echars from 'echarts'
import './plugins/element.js'

Vue.prototype.$axios = Axios
Vue.prototype.$echars = Echars
Vue.config.productionTip = false
// 路由前置守衛(wèi)（權(quán)限判斷：判斷對(duì)應(yīng)路由是否登錄未妹，保證有些組件必須要在登錄狀態(tài)下才能顯示）
router.beforeEach(function (to,from,next) {
    // 如果用戶去登錄路由，則直接next
    if(to.name === 'Login'){
        next()
    }else {
        // 判斷用戶是否登錄
        if(to.meta.requireAuth){
            // 如果登錄
            if(sessionStorage.getItem('isLogin')){
                // 如果用戶登錄且刷新界面了空入，則重新添加動(dòng)態(tài)路由
                if(store.getters.getIsLogin && store.getters.getIsRefresh){
                    store.dispatch('setNoRefresh')  // 改變刷新的狀態(tài)络它，設(shè)為false，調(diào)用setNoRefresh
                    dongRouter.DynamicAddRouter() // 添加動(dòng)態(tài)路由的方法
                    next({ ...to, replace: true })
                }else {
                    next()
                }
            }else {
                next({
                    path: '/Login'
                })
            }
        }else {
            if (store.getters.getIsRefresh) {
                console.log('加載動(dòng)態(tài)路由')
                store.dispatch('setNoRefresh') // 重新刷新設(shè)置為false
                dongRouter.DynamicAddRouter() // 添加動(dòng)態(tài)路由的方法
                next({ ...to, replace: true })
            } else {
                next()
            }
        }
    }
})
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

四歪赢、store文件下的index.js（倉(cāng)庫(kù)）

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 數(shù)據(jù)
const state = {
  // 判斷是否刷新
  isRefresh:true,
  // 判斷是否登錄
  isLogin:window.sessionStorage.getItem('isLogin') ? Boolean(window.sessionStorage.getItem('menuInfo')) : false,
  // 菜單數(shù)據(jù)
  menuInfo:(window.sessionStorage.getItem('menuInfo')) ? JSON.parse(window.sessionStorage.getItem('menuInfo')) : [],
  // 用戶數(shù)據(jù)
  employeeInfo:(window.sessionStorage.getItem('employeeInfo')) ? JSON.parse(window.sessionStorage.getItem('employeeInfo')) : [],
  // token
  token:(window.sessionStorage.getItem('token')) ? JSON.parse(window.sessionStorage.getItem('token')) : undefined
}

// 數(shù)據(jù)獲取
const getters = {
    getIsRefresh(state){
      return state.isRefresh
    },
    getIsLogin(state){
        return state.isLogin
    },
    getMenuInfo(state){
        return state.menuInfo
    },
    getemployeeInfo(state){
        return state.employeeInfo
    },
    getToken(state){
        return state.token
    }
}

// 行為化戳，要執(zhí)行的操作，如果有流程判斷埋凯、異步請(qǐng)求也寫在這里（主要是異步）
const actions = {
    setNoRefresh ({ commit }) {
        commit('setNoRefresh')
    },
    loginSuccess ({ commit }, data) {
        commit('LoginSuccess', data)
    },
    LoginExit ({ commit }) {
        commit('LoginExit')
    }
}

// 處理狀態(tài)的改變
const mutations = {
  // 設(shè)置不刷新
  setNoRefresh(state){
    state.isRefresh = false
  },
  // 登錄成功
  LoginSuccess(state,data){
    state.isLogin = true;
    state.menuInfo = data.data[0].menuInfo;
    state.employeeInfo = data.data[0].employeeInfo;
    state.token = data.token;
    window.sessionStorage.setItem('isLogin',true);
    window.sessionStorage.setItem('menuInfo',JSON.stringify(data.data[0].menuInfo));
    window.sessionStorage.setItem('token',JSON.stringify(data.token));
    window.sessionStorage.setItem('employeeInfo',JSON.stringify(data.data[0].employeeInfo));
  },
  // 退出登錄
  LoginExit(){
      state.isLogin = false;
      state.menuInfo = [];
      state.employeeInfo = [];
      state.token = undefined;
      window.sessionStorage.setItem('isLogin',false);
      window.sessionStorage.removeItem('menuInfo');
      window.sessionStorage.removeItem('employeeInfo');
      window.sessionStorage.setItem('token',undefined);
  }
}
const store = new Vuex.Store({
    state,
    getters,
    actions,
    mutations,
    modules: {
    }
})
export default store

五迂烁、登錄組件(login.vue)

<script>
import dongRouter from './../router/dongRouter'

export default {
        name: "login",
        data() {
            return {
                checked: true,
                formdata: {
                    username: '',
                    Pwd: ''
                }
            }
        },
        methods: {
            login () {
                var loginName = this.formdata.username
                var loginPwd = this.formdata.Pwd
                console.log(loginName)
                console.log(loginPwd)
                this.$axios.post('/api/employee/login', {
                        e_id: loginName,
                        e_password: loginPwd
                    },
                    {
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    }).then((response) => {
                    console.log(response.data)
                    if (response.data.code !== 200) {
                        return this.$message.error(response.data.message)
                    } else {
                        this.$message.success('登錄成功')
                        //將用戶名放入vuex（dispatch 異步操作 this.$store.dispatch('actions的方法'，arg)）
                        //this.$store.dispatch('loginSuccess',response.data.data[0])
                        this.$store.dispatch('loginSuccess',response.data)
                        window.sessionStorage.setItem('e_icon',JSON.stringify(response.data.data[0].employeeInfo.e_icon));
                        dongRouter.DynamicAddRouter()
                        //打印login狀態(tài)
                        // console.log(this.$store.state.isLogin)
                        //跳轉(zhuǎn)到主頁(yè)
                        that.$router.push('/index')
                    }
                })
            }
        }
    }
</script>

六递鹉、主頁(yè)框架組件Home.vue中綁定菜單
1、html中

<!--導(dǎo)航側(cè)邊欄-->
        <el-aside width="17%">
          <!--綁定菜單相關(guān)數(shù)據(jù)藏斩，這里的Menu我才用了引用組件躏结，具體組件內(nèi)容看第七步-->
          <Menu :menuList="getMenuInfo"></Menu>
        </el-aside>

2、script中

<script>
  import Menu from '../components/Menu.vue'
  import { mapGetters,mapActions} from 'vuex'
  export default {
      name: 'Home',
      components: {
          Menu
      },
      computed:{
        // 獲取倉(cāng)庫(kù)store文件下index.js存儲(chǔ)的菜單相關(guān)信息
          ...mapGetters(['getMenuInfo']),
      }  
  }
</script>

七狰域、Menu組件（Menu.vue）媳拴，結(jié)合elementui來(lái)的

<template>
    <div class="MenuBox">
        <el-scrollbar style="height: 100%;">
        <el-menu
                :default-active="$route.path"
                unique-opened="true"
                router
                mode="vertical"
                text-color="rgb(71,71,71)"
                active-text-color="rgb(1,179,163)"
                v-if="menuList"
                background-color="white"
                @open="handleOpen"
                @close="handleClose"
                class="el-menu-vertical-demo menu">
            <!--主頁(yè)內(nèi)容(主頁(yè)我是默認(rèn)讓每個(gè)權(quán)限都可以看到，所以就直接寫)-->
            <router-link to='/index'>
                <el-menu-item>
                    <i class="el-icon-house"></i>
                    <span slot="title">主頁(yè)</span>
                </el-menu-item>
            </router-link>
            <!--這里就是從后臺(tái)獲取的動(dòng)態(tài)菜單了兆览，也是用的一個(gè)組件屈溉，具體看第八步-->
            <MenuTree :menuList="menuList"></MenuTree>
        </el-menu>
        </el-scrollbar>
    </div>
</template>
<script>
    import MenuTree from '../components/MenuTree.vue'
    export default{
        name: 'Menu',
        components: {
            MenuTree
        },
        data(){
            return {}
        },
        props:{
            menuList: {
                type: Array,
                required: false
            }
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>
<style scoped>
    a {
        text-decoration: none;
    }
    .router-link-active {
        text-decoration: none;
    }
    .el-menu-item{
        height: 80px;
        line-height: 80px;
        font-size: 22px;
        color: rgb(167, 179, 182);
        letter-spacing: 3px;
    }
    .el-menu-item:hover{
        color: rgb(54, 57, 59) !important;
        font-weight: bolder!important;
    }
    .el-menu-item.is-active {
        background-image: linear-gradient(to right,rgb(255,255,255),rgb(206,255,251))!important;
    }
    .el-submenu__title.is-active {
        background-image: linear-gradient(to right,rgb(255,255,255),rgb(206,255,251))!important;
    }
    .el-submenu__title{
        transition: border-color .3s,background-color .3s,color .3s;
    }
    .MenuTreeBox .el-menu-item:hover [class^=el-icon-]{
        color: rgb(54, 57, 59) !important;
        font-weight: bolder!important;
    }
    .MenuBox{
        padding-top: 50px;
        height: 100%;
        box-sizing: border-box;
    }
    .MenuBox .menu{
        height: 1200px;
    }
    .el-scrollbar__wrap{
        overflow-x: hidden;
    }
</style>

八、MenuTree組件(MenuTree.vue)抬探，主要用了遞歸（調(diào)用自身組件子巾，重點(diǎn)重點(diǎn)重點(diǎn)，重要的事情說(shuō)三遍）

<template>
    <div class="MenuTreeBox">
        <template v-for='menu in menuList'>
            <!--{{menu.menuChilds.length}}-->
            <!--如果當(dāng)前有子菜單小压，則顯示子菜單el-submenu线梗，并調(diào)用遞歸（調(diào)用自身組件）-->
            <el-submenu v-if='menu.menuChilds.length>0' :index='menu.menuurl' :key="menu.menuid" >
                <template slot="title">
                    <i v-if="menu.menulmgclass" :class="menu.menulmgclass"></i>
                    <span slot="title">{{ menu.menuname }}</span>
                </template>
                <!-- 調(diào)用自身組件-->
                <MenuTree :menuList='menu.menuChilds'></MenuTree>
            </el-submenu>
            <!--如果沒有子菜單，則顯示一級(jí)菜單-->
            <el-menu-item v-else :index='menu.menuurl' :key='menu.menuid'>
                <i v-if="menu.menulmgclass" :class="menu.menulmgclass"></i>
                <span slot="title">{{ menu.menuname }}</span>
            </el-menu-item>
        </template>
    </div>
</template>
<script>
    import MenuTree from '../components/MenuTree.vue'
    import ElSubmenu from "../../../../myProject/project4/node_modules/element-ui/packages/menu/src/submenu";
    export default{
        components: {ElSubmenu,MenuTree},
        name: 'MenuTree',
        data(){
            return {}
        },
        props:{
            menuList: {
                type: Array,
                required: false
            }
        },
        methods:{
        }
    }
</script>
<style>
    .MenuTreeBox .el-submenu .el-menu-item,.MenuTreeBox .el-menu-item, .MenuTreeBox .el-submenu .el-submenu__title{
        height: 90px;
        line-height: 90px;
        font-size: 22px;
        color: rgb(167, 179, 182);
        box-sizing: border-box;
    }
    .MenuTreeBox{
        letter-spacing: 3px;
    }
    .MenuTreeBox .el-submenu [class^=el-icon-],.MenuTreeBox .el-menu-item [class^=el-icon-],.MenuBox .el-menu-item [class^=el-icon-]{
        font-size: 25px;
        color: rgb(167, 179, 182);
        margin-left: -50px;
        margin-right: 25px;
    }
    .MenuTreeBox .el-icon-user{
        padding-left: 50px;
        color: rgb(167, 179, 182);
    }
    .MenuTreeBox .el-icon-delete{
        margin-left: -70px!important;
        color: rgb(167, 179, 182);
    }
    .MenuBox .el-icon-house{
        margin-left: -100px!important;
        color: rgb(167, 179, 182);
    }
    .MenuTreeBox li.el-menu-item:hover,.MenuTreeBox .el-submenu__title:hover,.MenuBox .el-menu-item:hover{
        background-color: rgb(235,239,255)!important;
        background-image: linear-gradient(to right,rgb(255,255,255),rgb(206,255,251));
        color: rgb(54, 57, 59) !important;
        border-right: 3px solid rgb(15,185,169)!important;
        font-weight: bolder!important;
    }
    .MenuTreeBox .el-submenu__title:hover [class^=el-icon-],.MenuTreeBox .el-menu-item:hover,.MenuBox .el-menu-item:hover,.MenuBox .el-menu-item:hover .el-icon-house{
        color: rgb(54, 57, 59)!important;
    }
</style>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末怠益，一起剝皮案震驚了整個(gè)濱河市仪搔，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌蜻牢，老刑警劉巖烤咧，帶你破解...
沈念sama閱讀 217,406評(píng)論 6贊 503
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件偏陪，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡煮嫌，警方通過(guò)查閱死者的電腦和手機(jī)笛谦，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,732評(píng)論 3贊 393
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)立膛，“玉大人揪罕，你說(shuō)我怎么就攤上這事”Ρ茫” “怎么了好啰？”我有些...
開封第一講書人閱讀 163,711評(píng)論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)儿奶。經(jīng)常有香客問我框往，道長(zhǎng)，這世上最難降的妖魔是什么闯捎？我笑而不...
開封第一講書人閱讀 58,380評(píng)論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任椰弊，我火速辦了婚禮，結(jié)果婚禮上瓤鼻，老公的妹妹穿的比我還像新娘秉版。我一直安慰自己，他們只是感情好茬祷，可當(dāng)我...
茶點(diǎn)故事閱讀 67,432評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開白布清焕。她就那樣靜靜地躺著，像睡著了一般祭犯。火紅的嫁衣襯著肌膚如雪秸妥。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,301評(píng)論 1贊 301
城市分裂傳說(shuō)
那天沃粗，我揣著相機(jī)與錄音粥惧，去河邊找鬼。笑死最盅，一個(gè)胖子當(dāng)著我的面吹牛突雪，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播檩禾，決...
沈念sama閱讀 40,145評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼挂签，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了盼产？” 一聲冷哼從身側(cè)響起饵婆，我...
開封第一講書人閱讀 39,008評(píng)論 0贊 276
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后侨核，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體草穆，經(jīng)...
沈念sama閱讀 45,443評(píng)論 1贊 314
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,649評(píng)論 3贊 334
?白月光啟示錄
正文我和宋清朗相戀三年搓译，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了悲柱。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 39,795評(píng)論 1贊 347
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡些己，死狀恐怖豌鸡，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情段标，我是刑警寧澤涯冠，帶...
沈念sama閱讀 35,501評(píng)論 5贊 345
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站逼庞，受9級(jí)特大地震影響蛇更，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜赛糟，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,119評(píng)論 3贊 328
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一派任、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧璧南，春花似錦掌逛、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,731評(píng)論 0贊 22
一樁弒父案颤诀，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)。三九已至对湃，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間遗淳，已是汗流浹背拍柒。一陣腳步聲響...
開封第一講書人閱讀 32,865評(píng)論 1贊 269
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留屈暗，地道東北人拆讯。一個(gè)月前我還...
沈念sama閱讀 47,899評(píng)論 2贊 370
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像养叛，于是被迫代替她去往敵國(guó)和親种呐。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,724評(píng)論 2贊 354