Vue 页面权限控制和登陆验证

lastSeries 发布于2019-08-23 18:13 / 2931人阅读

摘要：如果一个页面，有角色越权访问，这时就得做出限制了。我们可以通过或来实现，下面用代码来展示一下如何用控制登陆验证。

更多文章 页面权限控制

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

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

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}`)
        }
    }
})

上述所有实现，都可以在我的vue轻量级后台管理系统基础模板项目里找到

专线服务混合云 vue.js多页面权限控制角色权限控制 php控制权限

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104864.html

sSpring Boot多模块+ Shiro + Vue：前后端分离登陆整合，权限认证（一）

摘要：前言本文主要使用来实现前后端分离的认证登陆和权限管理，适合和我一样刚开始接触前后端完全分离项目的同学，但是你必须自己搭建过前端项目和后端项目，本文主要是介绍他们之间的互通，如果不知道这么搭建前端项目的同学可以先找别的看一下。前言本文主要使用spring boot + shiro + vue来实现前后端分离的认证登陆和权限管理，适合和我一样刚开始接触前后端完全分离项目的同学，但是你必...

macg0406 2019-08-19 11:38 评论0 收藏0
从0到1搭建element后台框架之权限篇

摘要：项目中按钮权限注册全局自定义指令来完成的。如果对自定义指令不熟的话可以查阅官方文档。相关文章链接从到搭建后台框架打包优化从到搭建后台框架优化篇前言首先还是谢谢各位童鞋的大大的赞赞，你们的支持是我前进的动力！上周写了一篇从0到1搭建element后台框架，很多童鞋留言提到权限问题，这一周就给大家补上。GitHub 一、jwt授权认证现在大多数项目都是采用jwt授权认证，也就是我们所...

NervosNetwork 2019-08-23 17:09 评论0 收藏0
前端真的能做到彻底权限控制吗？

摘要：有一天突然想到一个问题，端的权限控制真的能控制权限吗仅仅靠前端，能不能做到真正的权限控制如果需要后台配合，应该如何配合可能这是一个老生常谈的问题，但还是想整理下，有误的地方望大家指出。有一天突然想到一个问题，web端的权限控制：1.真的能控制权限吗？2.仅仅靠前端，能不能做到真正的权限控制？3.如果需要后台配合，应该如何配合？可能这是一个老生常谈的问题，但还是想整理下，有误的地方望大...

luck 2019-08-21 18:35 评论0 收藏0
Vue中的验证登录状态

摘要：用存储用户路由守卫路由中设置的字段就在当中每次跳转的路径登录状态下访问页面会跳到如果没有访问任何页面。一个简单的保存登录状态的小。 Vue项目中实现用户登录及token验证先说一下我的实现步骤：使用easy-mock新建登录接口，模拟用户数据使用axios请求登录接口，匹配账号和密码账号密码验证后，拿到token，将token存储到sessionStorage中，并跳转到首...

draveness 2019-08-26 13:33 评论0 收藏0
iview admin动态路由、权限控制个人见解

摘要：目前是没有给我处理好权限这块的逻辑。我们的项目正常是路由是在本地配置好的一个路由文件，所以，要想实现动态的路由，我们就必须让实现动态生成。具体页面上的按钮权限的分配在前端页面是怎么控制的，完全可以去里借鉴。 iview admin目前是没有给我处理好权限这块的逻辑。所以，权限这块还是得我们自己去撸。（脸上笑嘻嘻、心里mmp！) 思路做权限，说到底就是为了让不同权限的用户，可以访问不...

LeanCloud 2019-08-23 18:25 评论0 收藏0