利用Vue怎么實(shí)現(xiàn)一個(gè)前端權(quán)限控制功能

這篇文章將為大家詳細(xì)講解有關(guān)利用Vue怎么實(shí)現(xiàn)一個(gè)前端權(quán)限控制功能，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

邏輯梳理

• 除登錄接口、退出接口外，其余接口增加token驗(yàn)證。

• 打開(kāi)頁(yè)面時(shí)請(qǐng)求獲取菜單接口，請(qǐng)求不成功說(shuō)明未登錄，給route默認(rèn)添加login頁(yè)面以及 * 重定向。

• 登錄成功后獲取到token，把token存入session以及請(qǐng)求頭。

• 登錄成功后獲取菜單接口，請(qǐng)求回來(lái)的路由和vuex里面全部的路由進(jìn)行匹配，獲取component。

• 把獲取完component的路由格式化，找自己的parentId，如果找到的話插入到該元素的child里面。

思路大致就是這樣，有聽(tīng)得模糊的也不要緊，跟隨我的步伐看看代碼是怎樣寫(xiě)的你就明白了~

實(shí)現(xiàn)

1.初始化

route.js

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

Vue.use(Router)
const router = new Router()
// 全局前置守衛(wèi)
router.beforeEach( async (to, from, next) => {
 let userRoutes = store.state.global.userRoutes //userRoutes 當(dāng)前用戶擁有的權(quán)限
 if (userRoutes.length && !userRoutes.filter(item => item.path == to.path).length) {
  next(from.path)
  return
 }
 next()
})
export default router

大家可以看到route.js里沒(méi)有路由，因?yàn)槁酚啥际莿?dòng)態(tài)添加進(jìn)去的，只有一個(gè)全局守衛(wèi)，作用是當(dāng)?shù)顷懗晒?，用戶地址欄手?dòng)輸入地址，判斷路由是否正確，如果正確就讓他跳轉(zhuǎn)。

vuex

//state.js
export default {
 // 全部路由
 allRoutes: [
  //登錄頁(yè)面
  {
   path: '/demo',
   name: 'demo',
   component: () => import('@/views/demo')
  },
  {
   path: '*',
   redirect: '/demo'
  },
  //主頁(yè)面
  {
   path: '/',
   component: () => import('@/views'),
  },
  {
   path: '/home',
   name: 'home',
   component: () => import('@/views/home')
  }
 ],
 // 用戶匹配的路由,要用addRoutes添加到route
 userRoutes: [],
 // 渲染用戶菜單
 userMenus: []
}

state中需要定義全部的路由，這個(gè)用來(lái)跟后臺(tái)請(qǐng)求到的權(quán)限進(jìn)行匹配，并且獲取component組件。

actions.js里面是主要的邏輯，其中g(shù)etMenu方法是本文的核心

數(shù)據(jù)返回時(shí)格式
menu = [
 {id: 1, name: '首頁(yè)', path: '/home', parentId: 0},
 {id: 2, name: '系統(tǒng)設(shè)置', path: '', parentId: 0},
 {id: 3, name: '角色配置', path: '/roles', parentId: 2},
 {id: 4, name: '用戶配置', path: '/users', parentId: 2}
]
需要處理成
menu = [
 {id: 1, name: '首頁(yè)', path: '/home', parentId: 0},
 {id: 2, name: '系統(tǒng)設(shè)置', path: '', parentId: 0, 
   child: [
     {id: 3, name: '角色配置', path: '/roles', parentId: 2},
     {id: 4, name: '用戶配置', path: '/users', parentId: 2}
    ]
  },
]

所以在下方需要用到遞歸來(lái)處理↓

//actions.js

// 獲取當(dāng)前用戶權(quán)限
 getMenu: async ({ state, commit, dispatch }) => {
  //請(qǐng)求當(dāng)前用戶所擁有的權(quán)限
  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 一級(jí)路由 anotherArr 其他級(jí)別路由
   oneArr = userRoutes.filter(item => !item.parentId)
   anotherArr = userRoutes.filter(item => item.parentId)
   anotherArr.forEach(item => {
    oneArr.forEach(obj => {
     if (item.parentId == obj.id) { //如果匹配 說(shuō)明找到父級(jí)，直接push到父級(jí)的child里面
      if (!obj.child.filter(k => k.id == item.id).length) {
       obj.child.push(item)
      }
     } else {  //如果沒(méi)有，說(shuō)明本級(jí)路由沒(méi)有找到，去下一級(jí)別路由找父級(jí) 路由級(jí)別：1級(jí)路由，2級(jí)路由，3級(jí)路由......
      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來(lái)渲染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})
   }
  }
 }

到現(xiàn)在為止，路由以及菜單的數(shù)據(jù)，就已經(jīng)處理完了，剩下的就是addRoutes添加到route路由里面，這樣頁(yè)面就可以跳轉(zhuǎn)了~

我們接著來(lái)看登錄：

// 登錄
 login: async ({ commit, dispatch}, params) => {
  let result = await axios('/api/login', {params})
  if(result.data.code > 0) {
   // 登錄成功以后 獲取當(dāng)前用戶權(quán)限路由
   let userRoutes = await dispatch('getMenu')
   if (userRoutes.code > 0) {
    // 把請(qǐng)求回來(lái)的路由動(dòng)態(tài)添加到 route 里
    router.addRoutes(userRoutes.data)
    // 添加完成后，現(xiàn)在可以跳轉(zhuǎn)到首頁(yè)了~
    router.push('/home')
   }
   return {code: 1, data: result.data}
  } else {
   console.log(result.data.msg)
   return {code: 0}
  }
 },

現(xiàn)在就已經(jīng)大功告成了，你的項(xiàng)目可以進(jìn)行正常的登錄、跳轉(zhuǎn)、動(dòng)態(tài)更新路由等操作了~

但是

現(xiàn)在還差最后一步，退出登錄

因?yàn)樵赼xios攔截里面，token失效后會(huì)調(diào)用退出接口

axios.interceptors.response.use(
 response => {
  if (response.status === 200) {
   // 身份驗(yàn)證失敗 
   if(response.data.code === -1) {
    // 執(zhí)行退出登錄
    store.dispatch('global/loginOut')
   } else {
    // 如果請(qǐng)求頭里有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)
  }
 }
)

所以才會(huì)提到開(kāi)頭說(shuō)：剛打開(kāi)頁(yè)面的時(shí)候，不管有沒(méi)有登錄，都去請(qǐng)求菜單接口。

如果沒(méi)有登錄，則會(huì)調(diào)用退出登錄接口，給路由設(shè)置默認(rèn)路由。

 // 退出登錄
 loginOut: async ({ state }) => {
  // 退出登錄清空 token 和 headers 里面的 token
  localStorage.removeItem('token')
  delete axios.defaults.headers.token
  // 退出登錄要?jiǎng)討B(tài)添加 登錄頁(yè)面 和 * 重定向頁(yè)面
  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('退出登錄接口異常')
  }
 },

關(guān)于利用Vue怎么實(shí)現(xiàn)一個(gè)前端權(quán)限控制功能就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。