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)