Vue + Element-ui實現后台管理系統(6)---權限管理思路講解

權限管理思路講解

有關后台管理系統之前寫過五篇博客,看這篇之前最好先看下這五篇博客。另外這里只展示關鍵部分代碼，項目代碼放在github上： mall-manage-system

1、Vue + Element-ui實現后台管理系統(1) --- 總述

2、Vue + Element-ui實現后台管理系統(2) --- 項目搭建 + ⾸⻚布局實現

3、Vue + Element-ui實現后台管理系統(3) --- 面包屑 + Tag標簽切換功能

4、Vue + Element-ui實現后台管理系統(4)---封裝一個ECharts組件的一點思路

5、Vue + Element-ui實現后台管理系統(5)---封裝一個Form表單組件和Table表格組件

這篇主要講解權限相關的功能：

整體效果

admin用戶看到的菜單

xiaoxiao用戶看到的菜單

可以發現不同的用戶所看到側邊欄的菜單是不一樣的。

簡單來講大致需要滿足的功能就是：

1、不同的用戶會根據權限不同，在后台管理系統渲染不同的菜單欄。
2、用戶登陸之后,會獲取路由菜單和一個token,之后跳轉的頁面都需要帶着token。
3、用戶退出登陸,清除動態路由,清除token。跳轉到login頁面。
4、如果當前沒有token，那么跳轉到任何頁面都應該重定向到login頁面。

一、權限管理代碼思路講解

1、登陸所做的事情

登陸操作應該至少要做三件事情

1、獲取當前用戶對應的菜單欄的菜單,並存儲到vuex和cookies中。

2、獲取當前用戶的Token，存儲到vuex和cookie中

3、獲取當前的菜單生成動態路由。

代碼

  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)
        }
      })
    }
  }

2、退出登陸所做的事情

退出登陸所做的事情就和登陸相反,主要做兩件事情1、清除vuex和cookie中的菜單 2、清除vuex和cookie中的token

代碼

logOut() {
      //清除token
      this.$store.commit('clearToken')
      //清除菜單
      this.$store.commit('clearMenu')
      //重定向 一般是登陸頁
      location.reload()
    }

3、路由守衛所做的事

因為是后台管理系統,所以在我們在每切換一個路由都需要判斷當前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相關的代碼。

4、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: {}
}

5、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)