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.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
关于Vue中的options选项
Mar 22 Vue.js
vue+iview实现手机号分段输入框
Mar 25 Vue.js
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
解决vue中provide inject的响应式监听
Apr 19 Vue.js
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
el-table-column 内容不自动换行的解决方法
Aug 14 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 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
js实现鼠标点击文本框自动选中内容的方法
2015/08/20 Javascript
JS实现星星评分功能实例代码(两种方法)
2016/06/09 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
2016/06/21 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2019/09/06 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
python实现自主查询实时天气
2018/06/22 Python
Python两个字典键同值相加的几种方法
2019/03/05 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
基于Django实现日志记录报错信息
2019/12/17 Python
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
Kaufmann Mercantile官网:家居装饰、配件、户外及更多
2018/09/28 全球购物
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
金山毒霸系列的笔试题
2013/04/13 面试题
毕业生实习鉴定
2013/12/11 职场文书
测控技术与仪器个人求职信范文
2013/12/30 职场文书
团队精神演讲稿
2013/12/31 职场文书
电子信息工程专业推荐信
2014/02/14 职场文书
2015年元旦主持词开场白
2014/12/14 职场文书
初中数学课堂教学反思
2016/02/17 职场文书
如何使用PostgreSQL进行中文全文检索
2021/05/27 PostgreSQL
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle
Go语言应该什么情况使用指针
2021/07/25 Golang
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server
用JS写一个发布订阅模式
2021/11/07 Javascript
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python
选购到合适的激光打印机
2022/04/21 数码科技