Vue + Element-ui实现后台管理系统(6)---权限管理思路讲解

权限管理思路讲解

有关后台管理系统以前写过五篇博客,看这篇以前最好先看下这五篇博客。另外这里只展现关键部分代码，项目代码放在github上： mall-manage-system

一、Vue + Element-ui实现后台管理系统(1) --- 总述

二、Vue + Element-ui实现后台管理系统(2) --- 项目搭建 + ⾸⻚布局实现

三、Vue + Element-ui实现后台管理系统(3) --- 面包屑 + Tag标签切换功能

四、Vue + Element-ui实现后台管理系统(4)---封装一个ECharts组件的一点思路

五、Vue + Element-ui实现后台管理系统(5)---封装一个Form表单组件和Table表格组件

这篇主要讲解权限相关的功能：

总体效果

admin用户看到的菜单

xiaoxiao用户看到的菜单

能够发现不一样的用户所看到侧边栏的菜单是不同的。

简单来说大体须要知足的功能就是：

一、不一样的用户会根据权限不一样，在后台管理系统渲染不一样的菜单栏。
二、用户登录以后,会获取路由菜单和一个token,以后跳转的页面都须要带着token。
三、用户退出登录,清除动态路由,清除token。跳转到login页面。
四、若是当前没有token，那么跳转到任何页面都应该重定向到login页面。

1、权限管理代码思路讲解

一、登录所作的事情

登录操做应该至少要作三件事情

一、获取当前用户对应的菜单栏的菜单,并存储到vuex和cookies中。

二、获取当前用户的Token，存储到vuex和cookie中

三、获取当前的菜单生成动态路由。

代码

methods: {
    login() {
      this.$http.post('api/permission/getMenu', this.form).then(res => {
        res = res.data
        if (res.code === 20000) {
          //先清除 房子重复加入
          this.$store.commit('clearMenu')
          //再加入
          this.$store.commit('setMenu', res.data.menu)
          //放入token
          this.$store.commit('setToken', res.data.token)
          //添加动态路由
          this.$store.commit('addMenu', this.$router)
          //跳转到首页
          this.$router.push({ name: 'home' })
        } else {
          //若是失败 提示失败信息
          this.$message.warning(res.data.message)
        }
      })
    }
  }

二、退出登录所作的事情

退出登录所作的事情就和登录相反,主要作两件事情一、清除vuex和cookie中的菜单 二、清除vuex和cookie中的token

代码

logOut() {
      //清除token
      this.$store.commit('clearToken')
      //清除菜单
      this.$store.commit('clearMenu')
      //重定向 通常是登录页
      location.reload()
    }

三、路由守卫所作的事

由于是后台管理系统,因此在咱们在每切换一个路由都须要判断当前token是否存在,这个时候就须要经过路由守卫来实现。

router.beforeEach((to, from, next) => {
  // 防止刷新后vuex里丢失token
  store.commit('getToken')
  // 防止刷新后vuex里丢失标签列表tagList
  store.commit('getMenu')
  let token = store.state.user.token
  // 过滤登陆页，由于去登录页不须要token(防止死循环)
  if (!token && to.name !== 'login') {
    next({ name: 'login' })
  } else {
    next()
  }
})

整个过程你们就是这样。如今展现vuex相关的代码。

四、vuex存放token相关方法。

import Cookie from 'js-cookie'
export default {
  state: {
    token: ''
  },
  mutations: {
    //存放token
    setToken(state, val) {
      state.token = val
      Cookie.set('token', val)
    },
    //清空token
    clearToken(state) {
      state.token = ''
      Cookie.remove('token')
    },
    //获取token
    getToken(state) {
      state.token = Cookie.get('token')
    }
  },
  actions: {}
}

五、vuex存放菜单相关方法

import Cookie from 'js-cookie'
export default {
  state: {
    menu: []
  },
  mutations: {
    setMenu(state, val) {
      //vuex添加
      state.menu = val
      //cookie也添加
      Cookie.set('menu', JSON.stringify(val))
    },
    clearMenu(state) {
      //清除也同样 vuex和cookie都清除
      state.menu = []
      Cookie.remove('menu')
    },
    addMenu(state, router) {
      if (!Cookie.get('menu')) {
        return
      }
      //取出cookie数据 给vuex
      let menu = JSON.parse(Cookie.get('menu'))
      state.menu = menu
      //添加动态路由 主路由为Main.vue
      let currentMenu = [
        {
          path: '/',
          component: () => import(`@/views/Main`),
          children: []
        }
      ]
      //若是是一级菜单 那么菜单名称确定有路由 若是是二级菜单那么一级没有 二级有路由
      menu.forEach(item => {
        if (item.children) {
          item.children = item.children.map(item => {
            item.component = () => import(`@/views/${item.url}`)
            return item
          })
          currentMenu[0].children.push(...item.children)
        } else {
          item.component = () => import(`@/views/${item.url}`)
          currentMenu[0].children.push(item)
        }
      })
      //添加动态路由
      router.addRoutes(currentMenu)
    }
  },
  actions: {}
}

整个电商后台管理系统相关内容到这里就已经写完了。

别人骂我胖，我会生气，由于我内心认可了我胖。别人说我矮，我就会以为可笑，由于我内心知道我不可能矮。这就是咱们为何会对别人的攻击生气。
攻我盾者，乃我心里之矛(16)