权限
描述:根据用户不同的权限,决定用户能访问哪些页面或调用哪些接口。
例子:🌰假设张三(学生),李四(老师)。张三可以进入[操场,图书馆,学生宿舍,学生食堂],李四能进入[操场,图书馆,老师宿舍,老师食堂],此时这种根据身份区别就叫做权限。 此时[操场,图书馆]所有都可以进入的,叫做公共页面。
代码翻译:🌰
现有权限student代表学生
现有权限teacher代表老师
现在公共页面[操场,图书馆]
现有学生专属页面[学生宿舍,学生食堂]
先有老师专业页面[老师宿舍,老师食堂]
当前本地已存储用户信息权限为['user']
对应路由通过meta.roles表示为:
const routes = [ { path:'/playground',component:playground,meta:{ roles:['student','teacher'],title:'操场' } },
{ path:'/library',component:library,meta:{ roles:['student','teacher'],title:'图书馆' } },
{ path:'/studentDorm',component:studentDorm,meta:{ roles:['student'],title:'学生宿舍' } },
{ path:'/studentCanteen',component:studentCanteen,meta:{ roles:['student'],title:'学生食堂' } },
{ path:'/teacherDorm',component:teacherDorm,meta:{ roles:['teacher'],title:'老师宿舍' } },
{ path:'/teacherCanteen',component:teacherCanteen,meta:{ roles:['teacher'],title:'老师食堂' } }
]
每次进入页面前都根据当前账号信息的权限和路由列表的每个具体路由的roles权限判断是否允许进入
具体的方法就是beforeEach
router.beforeEach((to,from,next)=>{
let roles = localStorage.getItem('roles')
let toRoute = routes.find(route=>route.path === to.path);
next()
})