Vue 简单实现前端权限控制

简要说明

最近写了一下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: '', parentId: 0},
  {id: 3, name: '角色配置', path: '/roles', parentId: 2},
  {id: 4, name: '用户配置', path: '/users', parentId: 2}
]
需要处理成
menu = [
	{id: 1, name: '首页', path: '/home', parentId: 0},
	{id: 2, name: '系统设置', path: '', parentId: 0, 
    	child: [
          {id: 3, name: '角色配置', path: '/roles', parentId: 2},
          {id: 4, name: '用户配置', path: '/users', 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('退出登录接口异常')
    }
  },

到现在为止，有项目就算大功告成了~

本文的demo暂时就不往这里放了，如有需要的小伙伴，请私信我~

本文到这里就结束了，可能写的有点杂，有不明白的地方欢迎大家评论区提问，或者私信我，我都会和大家一一讨论与解答~ 前端小白，希望大家多多鼓励~