基于Vue+ element的登录验证和动态权限渲染

时间:2021-1-8 作者:admin

先说登录验证,就是使用常用的jwt方式,说到jwt,先来简单介绍一下~

Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准,详情www.jianshu.com/p/576dbf44b…

再说根据权限渲染页面,传统的页面权限是指,系统有张三、李四、王小二 三种角色,其中每个人所能访问到的页面是固定的,这种实现有两种方式,第一种是在路由元中将角色固定好,在页面渲染时候根据后端返回角色去生成菜单页,第二种是根据后端返回的角色去动态生成路由,当然这两种方式同样也需要进行全局路由钩子匹配,防止手动输入地址。这里就不进行详细讲解。

动态渲染权限,顾名思义,这里的权限是动态的,举个例子,开始角色张三可访问页面为a、b,但是可以通过页面中设置,将张三页面访问权限设置为a、b、c、d,这样一来,用传统的方式就不生效了。下面描述一下,实现的思路~

一、路由举例

{
    path: 'limitmanage',
    name: 'limitmanage',
    component: () => import('@/views/systemManage/limitManage.vue'),        
    meta: {title: '权限管理',page: 'limitmanage'},  
    show: true
},

二、菜单渲染

使用element的menu渲染,下面是判断是否有权限访问菜单函数,this.pages是登录成功时,返回的用户可访问菜单列表,这个pages存储到vuex和localStroge中各一份,并在修改权限时,进行本地更新和后端数据更新

judgeMenu(item){
    if (!item) return
    let result = item.some(el => {
        return this.pages.indexOf(el.meta.page) !== -1
    })
    return result
},

三、全局路由钩子

async judgeRouter(){
    await this.judgeLogin()
    this.$router.beforeEach((to, from, next) => { // 路由全局守卫
        if (this.pageList.indexOf(to.meta.page) == -1 && from.name !== 'login' && localStorage.getItem('token') && to.name !== 'login') { // 手动去无权限页面
            Message.warning({message: '无权限访问,跳转到默认页面'})
            this.$router.push({name: this.pageList[0]})return
        }
        next()
    })
}

注意:这里的judgeLogin是为了更新vuex中数据,因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值初始化。

新手上路,如有问题,谢谢指出。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。