Vue 简单实现前端权限控制的示例


Posted in Vue.js onDecember 25, 2020

简要说明

最近写了一下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('退出登录接口异常')
  }
 },

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

到此这篇关于Vue 简单实现前端权限控制的示例的文章就介绍到这了,更多相关Vue 前端权限控制内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
vue编写简单的购物车功能
Jan 08 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
如何让vue长列表快速加载
Mar 29 Vue.js
vue首次渲染全过程
Apr 21 Vue.js
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
vue中div禁止点击事件的实现
Apr 02 Vue.js
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 #Vue.js
vue使用require.context实现动态注册路由
Dec 25 #Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 #Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 #Vue.js
vue 使用class创建和清除水印的示例代码
Dec 25 #Vue.js
基于vue+echarts数据可视化大屏展示的实现
Dec 25 #Vue.js
vue3使用vue-count-to组件的实现
Dec 25 #Vue.js
You might like
php随机输出名人名言的代码
2012/10/07 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
phpmailer绑定邮箱的实现方法
2016/12/01 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
CI框架简单分页类用法示例
2020/06/06 PHP
JavaScript 动态将数字金额转化为中文大写金额
2009/05/14 Javascript
Javascript Object.extend
2010/05/18 Javascript
基于jQuery的获得各种控件Value的方法
2010/11/19 Javascript
又一枚精彩的弹幕效果jQuery实现
2016/07/25 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
详解Sea.js中Module.exports和exports的区别
2017/02/12 Javascript
在 Angular中 使用 Lodash 的方法
2018/02/11 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
浅谈webpack+react多页面开发终极架构
2018/11/11 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
jquery检测上传文件大小示例
2020/04/26 jQuery
JavaScript中的几种继承方法示例
2020/12/06 Javascript
使用python开发vim插件及心得分享
2014/11/04 Python
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
Python中的FTP通信模块ftplib的用法整理
2016/07/08 Python
将python文件打包成EXE应用程序的方法
2019/05/22 Python
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
Python浮点数四舍五入问题的分析与解决方法
2019/11/19 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
应届护士推荐信
2013/11/16 职场文书
护理助产毕业生的求职信
2014/03/02 职场文书
《灰椋鸟》教学反思
2014/04/27 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书
同学聚会开幕词
2019/04/02 职场文书
医生行业员工的辞职信
2019/06/24 职场文书
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技
Java版 简易五子棋小游戏
2022/05/04 Java/Android