vue 前端显示图片加token_Vue 页面权限控制和登陆验证

页面权限控制

页面权限控制是什么意思呢？

就是一个网站有不同的角色，比如管理员和普通用户，要求不同的角色能访问的页面是不一样的。如果一个页面，有角色越权访问，这时就得做出限制了。

Vue 动态添加路由及生成菜单这是我写过的一篇文章，

通过动态添加路由和菜单来做控制，不能访问的页面不添加到路由表里，这是其中一种办法。

另一种办法就是所有的页面都在路由表里，只是在访问的时候要判断一下角色权限。如果有权限就让访问，没有权限就拒绝，跳转到 404 页面。

思路：

在每一个路由的 meta 属性里，将能访问该路由的角色添加到 roles 里。用户每次登陆后，将用户的角色返回。然后在访问页面时，把路由的 meta 属性和用户的角色进行对比，如果用户的角色在路由的 roles 里，那就是能访问，如果不在就拒绝访问。

代码示例：

路由信息

routes: [ { path: '/login', name: 'login', meta: { roles: ['admin', 'user'] }, component: () => import('../components/Login.vue') }, { path: 'home', name: 'home', meta: { roles: ['admin'] }, component: () => import('../views/Home.vue') },]

页面控制

// 假设角色有两种：admin 和 user// 这里是从后台获取的用户角色const role = 'user'// 在进入一个页面前会触发 router.beforeEach 事件router.beforeEach((to, from, next) => { if (to.meta.roles.includes(role)) { next() } else { next({path: '/404'}) }})

登陆验证

网站一般只要登陆过一次后，接下来该网站的其他页面都是可以直接访问的，不用再次登陆。

我们可以通过 token 或 cookie 来实现，下面用代码来展示一下如何用 token 控制登陆验证。

router.beforeEach((to, from, next) => { // 如果有token 说明该用户已登陆 if (localStorage.getItem('token')) { // 在已登陆的情况下访问登陆页会重定向到首页 if (to.path === '/login') { next({path: '/'}) } else { next({path: to.path || '/'}) } } else { // 没有登陆则访问任何页面都重定向到登陆页 if (to.path === '/login') { next() } else { next(`/login?redirect=${to.path}`) } }})

上述首先可以在https://github.com/woai3c/vue-admin-template项目里找到

欢迎大家评论讨论哦，无论你是大神还是小白，都可以私信小编“学习”加群领取前端学习资料哦

vue 前端显示图片加token_Vue 页面权限控制和登陆验证相关推荐

vue 前端显示图片加token_vue+node.js手把手教你搭建一个直播平台（二）
上一期,帅气的小羽给老铁们介绍了直播平台的项目的后端搭建,这期就让小羽带大家来搭建一下前端的框架. 1.创建前端工程毫无疑问,搭建一个项目的框架,那第一步肯定是得创建一个工程啦.cmd命令,输入vu ...
vue 前端显示图片加token_手摸手，带你用vue撸后台系列二(登录权限篇)
完整项目地址:vue-element-admin https://github.com/PanJiaChen/vue-element-admin 前言拖更有点严重,过了半个月才写了第二篇教程.无奈自 ...
vue 前端显示图片加token_前端甩锅神器：vue中的mock使用
首先声明,本文所介绍的方法,只是用于,在做好前端联调的本分工作之余,把前后端联调责任划清界限,并不用于帮后端定位问题(当然,mock也有更全面的方法促进项目的进行,小女不才,在此不提供介绍): 跟陌生 ...
vue 前端显示图片加token_前端Vue3.0：从0到1手把手撸码搭建管理后台系统
第1节 – 了解项目开发流程手把手撸码前端 – 第1学时了解产品从0到1的开发流程,产品经理.UI设计师.研发部.测试工程师第2节 – 构建vue项目.代码仓库管理手把手撸码前端 – 第2学时 ...
前端显示图片加token
项目开发中,用户权限验证场景比较常见, 但是给图片加验证该如何做呢?这里给出两个思路. 1- 改造用户身份验证方法,通过URL方式传token. 一般情况下用户token是放在header中的,但是i ...
vue页面加载时闪现_如何解决Vue.js显示数据的时,页面闪现
下面我就为大家分享一篇解决使用Vue.js显示数据的时,页面闪现原始代码的问题,具有很好的参考价值,希望对大家有所帮助. 今天开始学习Vue.js的使用,但是在学习过程中发现一个问题,那就是页面加载数 ...
vue调用接口获取后台数据_使用Vue实现调用接口加载页面初始数据
使用Vue实现调用接口加载页面初始数据闲着没事写了一个电影推荐的网页,很简单,使用的是Vue的实现. let vm = new Vue({ el:'#content', data:{ name:'' ...
html网页点击按钮闪现怎么解决,解决使用Vue.js显示数据的时,页面闪现原始代码的问题...
今天开始学习Vue.js的使用,但是在学习过程中发现一个问题,那就是页面加载数据时,原始代码会闪现一下.查访各方资料,终的解决方法. 第一步.加入一段css代码 [v-cloak] { display ...
bug解决-Vue中img图片加载失败解决方案
Vue 中img图片加载失败解决方案 bug:assets文件下的图片动态取得话,显示不出来. 解决方法:把图片放到public文件夹下 public是直接原封不动打包到dist里面
WINDOWS10 微软应用商店 microsoft store 打不开显示无法加载页面
WINDOWS10 微软应用商店 microsoft store 打不开显示无法加载页面确定后就已经生效,不用注销或重启

vue 前端显示图片加token_Vue 页面权限控制和登陆验证

vue 前端显示图片加token_Vue 页面权限控制和登陆验证相关推荐

最新文章

热门文章