Vue保持用户登录及权限控制

vue-router-power-demo

核心内容有两点: 一是保持用户登录状态,二是根据登录用户的角色动态挂在路由

使用vuex保持用户登录

  1. 点击登录按钮,使用vuex的actions分发登录操作,发送用户名和密码到后台获取登录token, 并存入vuex的state和cookie中
  2. 使用导航守卫,每次跳转页面的时候检查是否有token,以此来判断用户是否登录

动态挂在路由

  1. 登录成功后拉去用户信息,包括用户角色,用户名等
  2. 根据用户角色循环判断预设路由表,将符合要求的路由筛选出来,使用addRoutes()动态挂载

src项目结构

src
│  App.vue
│  main.js
│  permission.js   // vue router 守卫导航,对token和role进行判断
├─api              // 统一管理前端与服务器之间的api接口
├─layout           // 主视图的结构管理,包括header,side-bar,main-body等
│  │  index.vue
│  └─components
│      ├─header
│      │      index.vue
│      └─sidebar
│              index.vue
│              side-item.vue  // side-bar菜单动态渲染的核心组件
├─mock            // 前端模拟服务器获取数据,modules下的文件名和api接口一一对应
│  │  index.js
│  └─modules
│          getuserinfo.js
│          login.js
│          logout.js
├─router          // 路由表,本身只需要一个index,为了结构分离了两个路由表
│      asyncRoutes.js       // 需要动态挂载的路由表
│      constantRoutes.js    // 常规路由表,通常为 login、404等一些不需要权限的路由表
│      index.js
├─store           // 加载 store 模块和 getters
│  │  getters.js  // 全局getters
│  │  index.js
│  └─modules      // 模块形式的store
│          permission.js
│          user.js
├─style
│      index.scss
├─utils
│      request.js // 封装了axios,这里只是简单封装,但实际项目中肯定有各种需求
└─views           // 各个页面内容├─document│      index.vue├─error-page│      404.vue├─login│      index.vue├─page1│      index.vue├─page2│      index.vue└─permissionpage.vuesuper.vueuser.vue

敲黑板,划重点

permission.js

放置全局导航守卫,和文件名含义一样,对用户的跳转行为进行许可判断,主要是利用vuex.store中的token和role进行判断,并完成路由的动态加载行为

store/modules/user.js

用户的全局状态,最关键的两个变量,token 和 role 。

token的默认值可以用cookies.get('token')获取,因为当页面刷新时,vuex.store中的所有状态都会重置,本身就需要判断和从cookie中获取,这样写省了一次判断,而且更为便捷。

actions的内容分发,主要有三个,login获取后台token并保存,getUserInfo获取用户信息并保存,logout清除本地的token和role等信息

store/modules/permission.js

用于储存全局路由表,有两个作用,一是获取需要动态挂载的路由表,二是用于侧边栏的导航渲染。

actions的主要内容时用role对asyncRoutes路由表进行筛选

router/constantRoutes.jsrouter/asyncRoutes.js

constantRoutes.js asyncRoutes.js这两个路由表很简单,本来就是和index.js一起配置的,但是为了清晰逻辑和结构把这两个表分离了出来。constantRoutes是默认加载路由,asyncRoutes是需要使用role进行筛选的路由,路由表的结构及配置是需要配合store/modules/permission.js一起使用。

这里使用的筛选逻辑:对每个route判断是否配置了meta.roles,如果没有,则表示该route全局可用,如果有,再查找meta.roles中是否有role的值,如果有表示该用户有使用这个route的权限。

最后很重要的一点,asyncRoutes路由表的最后需要配置{ path: '*', hidden: true, redirect: '/404' },并且只能配置在最后,用来跳转非合法的url

不在重点中的重点

这个说法有点矛盾,之所以说不在重点中,是因为上面的js中已经完成了用户的登录及页面权限的分配。

但是,我要说但是了,网页是需要导航页来引导用户的,如果将所有连接都放入导航页,那么没有权限的用户点击会跳转到404页,这在用户体验上不好,那么就需要在渲染导航页的时候对role进行判断。导航页少的时候还不麻烦,导航页一多就会显得十分繁重,而且不易维护。所以使用路由表动态的渲染出导航。

store/modules/permission.js的state中有个routes存储了该用户完整的权限路由表,导航菜单就是循环渲染这个路由表,但是该路由表中有许多路由时不需要在导航页中出现的,比如login,404等。这个时候就需要用到路由表中的hidden设置了,渲染的时候通过hidden来判断是否将该路由渲染到导航菜单中。

官方的标准路由表中是没有hidden这个配置的,这个选项其实应该是写在meta中的,只是可能为了方便写在了最外层,网上能找到的很多路由权限实列都是这样写的。所以如果有多个导航菜单并存的情况下,hidden不妨也可以改写成showOnTopshowOnSide,渲染的时候使用对应的选项进行判断即可。

既然导航菜单是用路由表渲染的,那么路由表的结构和顺序就显得十分重要的,这和渲染出来的导航菜单顺序及结构是一直的,复杂的导航菜单通常都有二级菜单和三级菜单,这用到了组件的递归,因为比较复杂,所以这个demo只做了简单的一级导航,目的是为了清晰的展示登录和页面权限管理

DEMO预览地址

DEMO预览地址

DEMO项目地址

在GitHub上配置的静态文件的问题记录:在GitHub的静态页面上,页面内部跳转没有问题,刷新后就找不到页面了。
根本原因在于demo展示的实际地址是https://cliff-rhine.github.io/vue-router-power-demo/,而vue的路由配置是在根目录上的,导致在页面内容跳转url之后,浏览器的url地址已经变成根目录依赖,而非/vue-router-power-demo/。所以在刷新页面时找不到文件。vue-router的url跳转机制实际上是html5的history.pushStatehistory.replaceState

项目在本地配置没有问题,可以正常刷新页面

TODO

  • 页面按钮权限管理

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/281313.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java B2B2C Springcloud多租户电子商城系统-Spring Cloud Sleuth

在微服务框架中,一个由客户端发起的请求在后端系统中会经过多个不同的的服务节点调用来协同产生最后的请求结果,每一个前段请求都会形成一条复杂的分布式服务调用链路,链路中的任何一环出现高延时或错误都会引起整个请求最后的失败。 愿意了解…

C#性能测试BenchmarkDotnet

1.简介在我们开发高性能代码时,需要各种针对性能优化进行编码。那么如何才能知道我们所加的代码是否有性能方面的正向优化呢?有了BenchmarkDotNet,做性能对比测试就非常容易了,只需要把你的测试方法加上特性[Benchmark], 想做不同…

Requests获取连接的IP地址

在接口自动化的时候,需要获取到连接的本地IP地址,方法如下 1 import requests 2 3 rsp requests.get("http://www.baidu.com", streamTrue) 4 print rsp.raw._connection.sock.getpeername()[0] 5 print rsp.raw._connection.sock.getsockna…

阿里云APP(V4.3) SSH远程登录功能设置操作指南

阿里云APP V4.3 发布了,这次的升级,不仅在iOS和android平台上支持SSH远程登录ECS功能,也支持密钥登录哦~~~ SSH远程登录,这是一个连阿里巴巴自己的技术人员都开心不已的功能! 各位攻城狮们,从更新到V4.3的那…

JS专题之节流函数

本文共 2000 字,读完只需 8 分钟上一篇文章讲了去抖函数,然后这一篇讲同样为了优化性能,降低事件处理频率的节流函数。 一、什么是节流? 节流函数(throttle)就是让事件处理函数(handler&#xf…

vue 2.6 插槽v-slot用法记录

v-slot用法简记用法示例匿名插槽与具名插槽插槽作用域组件使用插槽动态命名总结用法示例 vue2.6统一了插槽的语法v-slot 匿名插槽与具名插槽 在其他组件中使用child组件 <child><template v-slot:slotName>hello world</template> </child>child组…

Latex排版全解(转)

Latex排版全解 http://blog.csdn.net/langb2014/article/details/51354238转载于:https://www.cnblogs.com/yifdu25/p/8338399.html

git-ftp Can't access remote 'ft://...', exiting...问题记录

环境 服务器&#xff1a;西部数码虚拟主机 本地系统&#xff1a;windows 10 (LTSC 2019) 软件&#xff1a; Git Bash&#xff0c;gti-ftp (版本1.6.0) 问题 在使用git ftp init初始化上传代码的时候会出现 $ git ftp init fatal: Cant access remote ftp://dmkt:***dmkt.goto…

【Flutter教程】从零构建电商应用(一)

在这个系列中&#xff0c;我们将学习如何使用google的移动开发框架flutter创建一个电商应用。本文是flutter框架系列教程的第一部分&#xff0c;将学习如何安装Flutter开发环境并创建第一个Flutter应用&#xff0c;并学习Flutter应用开发中的核心概念&#xff0c;例如widget、状…

为OWA自定义快捷键

这篇短文分享一下如何为自己常用的网页添加自定义功能&#xff0c;例如添加快捷键。我这里用一个常用的网站作为范例。它是Outlook Web Access (OWA), 它的地址一般如下。我在写邮件时希望能用一些快捷键来提高工作效率&#xff0c;但系统默认自带的快捷键特别少&#xff0c;而…

数据结构 快速排序

快速排序是对冒泡排序的一种改进&#xff0c;是所有内部排序算法中平均性能最优的排序算法。其基本思想是基于分治法的&#xff1a;在待排序数组L[1...n]中任取一个元素pivot作为基准&#xff0c;从数组的两端开始扫描。设两个指示标志&#xff08;low指向起始位置&#xff0c;…

Finally语句块的运行

一、finally语句块是否一定运行&#xff1f; Java中异常捕获机制try...catch...finally块中的finally语句是不是一定会被运行&#xff1f;非常多人都说不是。当然他们的回答是正确的&#xff0c;经过试验。至少下面有两种情况下finally语句是不会被运行的&#xff1a; &#xf…

vue-cli 3.0 跨域请求代理

官方文档中指明&#xff0c;跨域请求可以通过配置vue.config.js中的devServer.proxy选项来进行配置。 这个选项配置的本质实际上就是http-proxy-middleware中间件的用法&#xff0c;和Webpack-dev-server的proxy一样。 vue-cli 3.0中介绍了两种常见的用法&#xff1a; modul…

小米人员架构调整:组建中国区,王川任总裁

12月13日上午&#xff0c;小米内部发布人员调整公开信&#xff0c;信中传达了两个重要内容&#xff1a;将销售与服务部改组为中国区&#xff0c;任命集团高级副总裁王川兼任中国区总裁。 在今年9月份&#xff0c;也就是小米上市前夕&#xff0c;雷军在一封内部信中宣布对公司组…

在 .NET 7上使用 WASM 和 WASI

WebAssembly&#xff08;WASM&#xff09;和WebAssembly System Interface&#xff08;WASI&#xff09;为开发人员开辟了新的世界。.NET 开发人员在 Blazor WebAssembly 发布时熟悉了 WASM。Blazor WebAssembly 在浏览器中基于 WebAssembly 的 .NET 运行时上运行客户端。WASI通…

Java基础 五 方法

方法 1.1 方法概述 在我们的日常生活中&#xff0c;方法可以理解为要做某件事情&#xff0c;而采取的解决办法。 如&#xff1a;小明同学在路边准备坐车来学校学习。这就面临着一件事情&#xff08;坐车到学校这件事情&#xff09;需要解决&#xff0c;解决办法呢&#xf…

django rest framework 过滤 lim分页

一.过滤 1.首先引用diango 自带的过滤配置 2.导入模块 from django_filters.rest_framework import DjangoFilterBackend from django_filters import rest_framework as filters 3.一种简单的过滤: class BookView(ModelViewSet):queryset Book.objects.all()serializer_clas…

MySQL用户及权限管理

MySQL用户及权限管理查看用户及权限查看用户及作用域&#xff08;使用范围&#xff09;查看用户权限创建用户及授权字段参数用户管理使用命令提示符登录MySQL mysql -h localhost -u root -p查看用户及权限 mysql中的用户信息和权限等都存储在一个名为mysql的数据库中。其中主…

附近有什么?8款可以查周边的App

如今科技发达的时代&#xff0c;手机的功能不仅仅只是能通讯聊天&#xff0c;而是逐渐的走进了人们的生活中。因为有了APP&#xff0c;我们的生活才更丰富&#xff0c;并且有很多是我们生活中不可缺少的软件&#xff0c;而这些软件便是根据手机中的GPS定位系统而来的。简单来说…

MyEclipse小问题与汉字处理

今天在使用MyEclipse时&#xff0c;遇到工作目录报错(如上图)&#xff0c;解决方法如下&#xff1a;找到对应工作区(查看工作区的方法为&#xff1a;单击File → Switch Workspace 即可)依次打开 .metadata文件夹 → .plugins文件夹 → org.eclipse.core.runtime文件夹 → .set…