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

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

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

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

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

一、路由举例

这里路由元中的page就是为了根据权限渲染菜单做准备～

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

二、菜单渲染

使用element的menu渲染，下面是判断是否有权限访问菜单函数，item是遍历的路由对象，this.pages是登录成功时，返回的用户可访问菜单列表，同时这也是在动态设置页面权限时，传给后端的list，这个pages存储到vuex和localStroge中各一份，并在修改权限时，进行本地更新和后端数据更新。

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

三、全局路由钩子

使用全局路由钩子去判断，当前的地址是否有权限访问，如果没有，就跳转到默认页面（当前有权限访问list的第一个页面this.pageList[0]）

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里面的数据就会被重新赋值初始化。

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