簡要說明

最近寫了一下vue控制權限(選單、路由)的專案，用了vuex、addRoutes動態新增路由方法等，總共100多行程式碼，跟大家分享一下~

邏輯梳理

• 除登入介面、退出介面外，其餘介面增加token驗證。
• 開啟頁面時請求獲取選單介面，請求不成功說明未登入，給route預設新增login頁面以及 * 重定向。
• 登入成功後獲取到token，把token存入session以及請求頭。
• 登入成功後獲取選單介面，請求回來的路由和vuex裡面全部的路由進行匹配，獲取component。
• 把獲取完component的路由格式化，找自己的parentId，如果找到的話插入到該元素的child裡面。

思路大致就是這樣，有聽得模糊的也不要緊，跟隨我的步伐看看程式碼是怎樣寫的你就明白了~

實現

1.初始化

route.js

import Vue from 'vue'
import Router from 'vue-router'
import store from '@/store'

Vue.use(Router)
const router = new Router()
// 全域性前置守衛
router.beforeEach( async (to,from,next) => {
 let userRoutes = store.state.global.userRoutes //userRoutes 當前使用者擁有的許可權
 if (userRoutes.length && !userRoutes.filter(item => item.path == to.path).length) {
  next(from.path)
  return
 }
 next()
})
export default router

大家可以看到route.js裡沒有路由，因為路由都是動態新增進去的，只有一個全域性守衛，作用是當登陸成功後，使用者位址列手動輸入地址，判斷路由是否正確，如果正確就讓他跳轉。

vuex

//state.js
export default {
 // 全部路由
 allRoutes: [
  //登入頁面
  {
   path: '/demo',name: 'demo',component: () => import('@/views/demo')
  },{
   path: '*',redirect: '/demo'
  },//主頁面
  {
   path: '/',component: () => import('@/views'),},{
   path: '/home',name: 'home',component: () => import('@/views/home')
  }
 ],// 使用者匹配的路由,要用addRoutes新增到route
 userRoutes: [],// 渲染使用者選單
 userMenus: []
}

state中需要定義全部的路由，這個用來跟後臺請求到的許可權進行匹配，並且獲取component元件。

actions.js裡面是主要的邏輯，其中getMenu方法是本文的核心

資料返回時格式
menu = [
 {id: 1,name: '首頁',path: '/home',parentId: 0},{id: 2,name: '系統設定',path: '',{id: 3,name: '角色配置',path: '/roles',parentId: 2},{id: 4,name: '使用者配置',path: '/users',parentId: 2}
]
需要處理成
menu = [
 {id: 1,parentId: 0,child: [
     {id: 3,parentId: 2}
    ]
  },]

所以在下方需要用到遞迴來處理↓

//actions.js

// 獲取當前使用者許可權
 getMenu: async ({ state,commit,dispatch }) => {
  //請求當前使用者所擁有的許可權
  let result = await axios('/api/menu/find')
  if (result.data.code > 0) {
   let userRoutes = result.data.result
   userRoutes.forEach(item => {
    item.child = []
    state.allRoutes.forEach(res => {
     if (item.path == res.path) {
      item.component = res.component
     }
    })
   })
   let oneArr = [],anotherArr = []  //oneArr 一級路由 anotherArr 其他級別路由
   oneArr = userRoutes.filter(item => !item.parentId)
   anotherArr = userRoutes.filter(item => item.parentId)
   anotherArr.forEach(item => {
    oneArr.forEach(obj => {
     if (item.parentId == obj.id) { //如果匹配 說明找到父級，直接push到父級的child裡面
      if (!obj.child.filter(k => k.id == item.id).length) {
       obj.child.push(item)
      }
     } else {  //如果沒有，說明本級路由沒有找到，去下一級別路由找父級 路由級別：1級路由，2級路由，3級路由......
      dispatch('recurrArr',{arr: oneArr,items: item})
     }
    })
   })
   commit('setState',{state: 'userRoutes',value: userRoutes})
   commit('setState',{state: 'userMenus',value: oneArr})
   return {code: 1,data: userRoutes}  //處理完成後返回 oneArr是遞迴處理後巢狀的，userRoutes是獲取到component來渲染route的
  } else {
   return {code: 0}
  }
 },// 遞迴找自己的parentId
 recurrArr: ({dispatch},{arr,items}) => {
  if (!arr) {
   return
  }
  for(let i = 0; i < arr.length; i ++ ){
   let item = arr[i]
   if (item.id == items.parentId) {
    if (!item.child.filter(k => items.id == k.id).length) {
     item.child.push(items)
    }
    break;
   } else {
    dispatch('recurrArr',{arr: item.child,items: items})
   }
  }
 }

到現在為止，路由以及選單的資料，就已經處理完了，剩下的就是addRoutes新增到route路由裡面，這樣頁面就可以跳轉了~

我們接著來看登入：

// 登入
 login: async ({ commit,dispatch},params) => {
  let result = await axios('/api/login',{params})
  if(result.data.code > 0) {
   // 登入成功以後 獲取當前使用者許可權路由
   let userRoutes = await dispatch('getMenu')
   if (userRoutes.code > 0) {
    // 把請求回來的路由動態新增到 route 裡
    router.addRoutes(userRoutes.data)
    // 新增完成後，現在可以跳轉到首頁了~
    router.push('/home')
   }
   return {code: 1,data: result.data}
  } else {
   console.log(result.data.msg)
   return {code: 0}
  }
 },

現在就已經大功告成了，你的專案可以進行正常的登入、跳轉、動態更新路由等操作了~

但是

現在還差最後一步，退出登入

因為在axios攔截裡面，token失效後會呼叫退出介面

axios.interceptors.response.use(
 response => {
  if (response.status === 200) {
   // 身份驗證失敗 
   if(response.data.code === -1) {
    // 執行退出登入
    store.dispatch('global/loginOut')
   } else {
    // 如果請求頭裡有token
    let token = response.headers.token
    if(token) {
     localStorage.setItem('token',token)
     axios.defaults.headers.token = token
    }
   }
   return Promise.resolve(response)
  } else {
   return Promise.reject(response)
  }
 }
)

所以才會提到開頭說：剛開啟頁面的時候，不管有沒有登入，都去請求選單介面。

如果沒有登入，則會呼叫退出登入介面，給路由設定預設路由。

 // 退出登入
 loginOut: async ({ state }) => {
  // 退出登入清空 token 和 headers 裡面的 token
  localStorage.removeItem('token')
  delete axios.defaults.headers.token
  // 退出登入要動態新增 登入頁面 和 * 重定向頁面
  let errRoutes = state.allRoutes.filter(item => item.path == '*')
  errRoutes.push(state.allRoutes.filter(res => errRoutes[0].redirect == res.path)[0])
  router.addRoutes(errRoutes);
  router.currentRoute.path !== '/demo' ? router.push("/demo") : null
 
  let result = await axios('/api/loginOut',{params: {userId: state.userId}})
  if(result.data.code !== 1) {
   console.log('退出登入介面異常')
  }
 },

到現在為止，有專案就算大功告成了~

到此這篇關於Vue 簡單實現前端許可權控制的示例的文章就介紹到這了,更多相關Vue 前端許可權控制內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！