欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue权限控制菜单显示

程序员文章站 2022-07-09 21:27:05
对于不同角色显示不同的菜单 思路1: 本地放一份完整的菜单数据,通过后台返回角色的菜单列表两者对比,筛选需要显示的菜单数据绑定,这里有个问题就是路由vue实例初始化就生成了,加载的全部,人为输入地址是可以访问到角色权限以外的数据,所以还要加路由构子router.beforeEach()去做判断哪些是 ......

对于不同角色显示不同的菜单

思路1:

  本地放一份完整的菜单数据,通过后台返回角色的菜单列表两者对比,筛选需要显示的菜单数据绑定,这里有个问题就是路由vue实例初始化就生成了,加载的全部,人为输入地址是可以访问到角色权限以外的数据,所以还要加路由构子router.beforeeach()去做判断哪些是角色权限以内的路由。这种思路的比较复杂,逻辑比较多

思路2:

  利用vue router官方api提供的router.addroutes()方法动态添加路由来实现

本章按思路2来实现该功能

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()触发

3.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/>'
})

以上即可实现简单的权限菜单