使用vue如何實現權限管理功能

這篇文章主要介紹了基於vue實現網站前台的權限管理(前後端分離實踐)，現在分享給大家，也給大家做個參考。

Javascript做為當下的熱門語言，用途很廣泛，從前端到後端處處可見其存在，該技術如今在我們專案內部也大量使用來開發諸如CMS系統以及其他其他一些資​​料分析系統的前端頁面，為此個人非常感興趣並將其作為帽子卡的擴展內容來進行課餘學習。
Javascript框架鱗次櫛比，但基本原理大致相同，因此選用國內人開發的vue.js進行一個初步的嘗試。學習vue.js也一週多的時間了，說起vue的主要用法，無外乎Declarative Rendering、Component System、Client-side Routing、Vue-resource、Axios以及視項目大小而決定是否使用的Vuex，學習vue事小，主要轉變思維，面向前後端分離的組件式web開發才是真正想去實踐的。

剛好我的個人網站CodeSheep最近要開發後台管理，因此剛好用vue這套來實現了一下。說到後台管理，繞不開的問題就是權限的管理。既然想實踐前後端分離這種思想，因此後台管理的所有web前端的東西應該​​獨立由前端完成，這其中就包括很重要的由前端來根據權限進行相關東西的控制。我們想要做到的是：不同的權限對應著不同的路由，同時頁面側邊欄也應該根據不同的權限，來異步生成對應的選單，講白了就是後台管理時不同權限的用戶其看到的介面選單是不一樣的，因此有了這裡實作登入和權限驗證的一套流程。
具體實作

1、點選「登入」按鈕觸發登入事件

this.$store.dispatch('LoginByEmail', this.loginForm).then(() => {
 this.$router.push({ path: '/' }); //登录成功之后重定向到首页
}).catch(err => {
 this.$message.error(err); //登录失败提示错误
});

其中非同步觸發的actions LoginByEmail的處理內容如下：

LoginByEmail ({ commit }, userInfo) {
   const email = userInfo.email.trim()
   return new Promise((resolve, reject) => {
    loginByEmail(email, userInfo.password).then(response => {
     const data = response.data
     setToken(response.data.token)
     commit('SET_TOKEN', data.token)
     resolve()
    }).catch(error => {
     reject(error)
    })
   })
  }

很容易看出想做的是將從伺服器端拿到的token（唯一標示使用者身分）放到瀏覽器本地Cookie中去

2、全域鉤子router.beforeEach中攔截路由

這一步是核心，具體處理流程示意如下：

#路由攔截處理流程

具體程式碼如下：

router.beforeEach((to, from, next) => {
 if (getToken()) { // 判断是否取到token
  if (to.path === '/login') {
   next({ path: '/' })
  } else {
   if (store.getters.roles.length === 0) { // 判断当前用户是否已获取完user_info信息
    store.dispatch('GetInfo').then(res => { // 获取user_info
     const roles = res.data.role
     store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表
      router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
      next({ ...to }) // 放行路由
     })
    }).catch(() => {
     store.dispatch('FedLogOut').then(() => {
      next({ path: '/login' })
     })
    })
   } else {
    next() // 放行该路由
   }
  }
 } else {
  if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单里的路径，继续让其访问
   next()
  } else { // 其他不在白名单里的路径全部让其重定向到登录页面！
   next('/login')
   alert('not in white list, now go to the login page')
  }
 }
})

流程圖中幾個重要步驟解釋一下：

判斷前端是否取到了token令牌：getToken()

操作很簡單，主要是從Cookie中獲取，看token是不是已經拿到了：

export function getToken () {
 return Cookies.get(TokenKey)
}

vuex異步操作store.dispatch('GetInfo')：獲取用戶資訊

  GetInfo ({ commit, state }) {
   return new Promise((resolve, reject) => {
    getInfo(state.token).then(response => {
     const data = response.data
     console.log(data)
     commit('SET_ROLES', data.role)
     commit('SET_NAME', data.name)
     resolve(response)
    }).catch(error => {
     reject(error)
    })
   })
  }

操作也很簡單，用一個get的restful api從伺服器取得使用者的角色和名字

vuex非同步操作store.dispatch('GenerateRoutes', { roles })：根據不同的roles來產生不同的前台路由

  GenerateRoutes ({ commit }, data) {
   return new Promise(resolve => {
    const { roles } = data
    let accessedRouters
    if (roles.indexOf('admin') >= 0) {
     accessedRouters = asyncRouter
    } else {
     accessedRouters = filterAsyncRouter(asyncRouter, roles)
    }
    commit('SET_ROUTERS', accessedRouters)
    resolve()
   })
  }

從程式碼中可以看出，我這是只區分了管理員角色admin和其他普通用戶（即非Aadmin兩種權限）

該系列的實踐後續還將嘗試更多，將會一一撰帖成文，我也是個初學者，路漫漫而求索之。 。 。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

在vue2.0中如何實作通訊？

Angular 2 樣式綁定有哪些方式

#在jquery中on和click的差別有哪些？

在jquery中on和click的差別有哪些？

仿淘寶的JSsearch搜尋（詳細教學）

#

以上是使用vue如何實現權限管理功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！