vue權限控制菜單顯示的簡單實現

為了對於不同角色顯示不同的菜單

思路1:

本地放一份完整的菜單數據,通過后台返回角色的菜單列表.兩者對比,篩選需要顯示的菜單數據綁定,

這里有個問題就是路由vue實例初始化就生成了,加載的全部,人為輸入地址是可以訪問到角色權限以外的數據,

所以還要加路由構子router.beforeEach()去做判斷哪些是角色權限以內的路由.

這種思路的比較復雜,邏輯比較多

思路2:

Vue Router官方API:

利用router.addRouter()就可以動態添加路由實現

 

下面詳細講一講vue.addRouter()實現步驟

1.初始化路由只有404.和login組件

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'login',
      component: () => import('@//components/login')
    },
    {
      path: '*',
      name: '404',
      component: () => import('@//components/404')
    }
  ]
})

2.登錄login

<script>
  import {mapActions} from 'vuex'
  export default {
    name: 'login',
    data() {
      return {
        user: {
          username: '',
          password: ''
        },
        loading: false,
      }
    },
    methods: {
      ...mapActions({add_Routes: 'add_Routes'}),

      handleLogin() {
        // 這里為了方便就設置兩個用戶，其它不允許
        if (this.user.username !== 'common' && this.user.username !== 'admin') {
          return
        }
        this.loading = true
        this.$api.login(this.user.username, this.user.password).then((res) => {
          if (res.status === 200) {
            // 將路由信息，菜單信息，用戶信息存到sessionStorage里
            sessionStorage.setItem('menuData', JSON.stringify(res.data.navData))
            sessionStorage.setItem('user', this.user.username)
            sessionStorage.setItem('routes', JSON.stringify(res.data.routerData))
            this.add_Routes(res.data.routerData) //觸發vuex里的增加路由
          }
        })
      }
    },
  }
</script>

登錄時從后台得到菜單數據navData和路由數據routerData把它存進sessionStorage防止刷新頁面時丟失,

引入vuex的this.add_Router()觸發

vuex:

import {ADD_ROUTES} from './mutations_type'
import Menufilter from './menufilter'
import router from '../router'
const addRoutes = {
  state: {
    routeData: []
  },
  mutations: {
    [ADD_ROUTES](state, addrouter) {
      let routes = []
      Menufilter(routes, addrouter) // 將后台的路由數據components轉化成組件
      router.addRoutes(routes)  // 添加路由
      router.push('/')
    }
  },
  actions: {
    add_Routes({commit}, addrouter) {
      commit(ADD_ROUTES, addrouter)
    }
  }
}
export default addRoutes

login組件的this.add_Router觸發mutations里的ADD_ROUTES,

ADD_ROUTES會做如下:

 1. Menufilter(route, addrouter)會處理后台返回的路由數據,因為后台返回的數據中的components對應的是字符串應該把它轉化成組件

import {lazy} from './lazyLoading'
export default (routers,data) => {
  //要重新遍歷一下，是因為，通常我們動態路由的時候，
  //是獲取服務端數據，這個component屬性是一個字符串轉化成組件
  generaMenu(routers,data)
}
function generaMenu(routers,data){
  data.forEach((item)=>{
    let menu = Object.assign({},item)
    menu.component = lazy(menu.component)
    if(item.children){
      menu.children = []
      generaMenu(menu.children,item.children)
    }
    routers.push(menu)
  })
}

// 懶加載組件lazy
function lazy(name) {
  let file = name.split('_')[0]
  if (name !== 'dashboard') {
    return () => import(`@/page/${file}/${name}.vue`)
  } else {
    return () => import(`@/components/${name}.vue`)
  }
}
export {lazy}

2. 調用router.addRouter(routes)動態添加路由

 

為了防止用戶手動刷新頁面還要在main.js重新觸發vuex里的add_Routes方法添加路由

import Vue from 'vue'
import App from './App'
import router from './router'
import Element from 'element-ui'
import store from './store/store'
import 'element-ui/lib/theme-chalk/index.css'
import api from './api/api'

Vue.config.productionTip = false
Vue.prototype.$api = api
Vue.use(Element)
// 用戶手動刷新頁面，這是路由會被重設，要重新新增
if (sessionStorage.getItem('user')) {
  let routes = JSON.parse(sessionStorage.getItem('routes'))
  store.dispatch("add_Routes", routes)
}
// 登錄狀態判斷
router.beforeEach((to, from , next) => {
  if (!sessionStorage.getItem('user') && to.path !== '/login') {
    next({
      path: '/login',
      query: {redirect: to.fullPath}
    })
  } else {
    next()
  }
})
new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>'
})

 

具體源碼請訪問https://github.com/liuyangjike/dynamic-router 一個實現的demo,如果覺得有幫助,請star一下