方案一改动当前代码量最小,无需后端改动,前端路由和侧边栏显示不变,在对需要权限区分的路由在跳转时候添加前置路由守卫router.beforeEach,进行当前权限判断,不满足权限的跳转到相应页面(自定义401、404页面等),但该方案不能实现真正的权限控制。
router.beforeEach((to, from, next) => {
if (store.getters.roles.length === 0) { // 判断是否保存有权限信息
const roles = store.getters.roles;
if (roles !== 'admin') { // 不为管理员
if (to.path === '/faultInfo') {
next({ path: '/401' })
} else {
next()
}
} else {
next()
}
} else {
next('/login');
}
});
方案二:
后端返回路由权限名,前端存储完整路由权限表,并动态生成路由****。****
建议看大神的文档,已经写的很详细了:手摸手,带你用vue撸后台 系列二(登录权限篇) - 掘金 - 掘金")
以下是自己实现思路:
建议登录login和返回用户路由信息get_user_info两件事分开请求比较好。
步骤:
· 登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到token之后(将这个token存贮到cookie中,保证刷新页面后能记住用户登录状态),前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息(如用户权限,用户名等等信息)。
· 权限验证:通过token获取用户对应的 role,动态根据用户的 role 算出其对应有权限的路由,通过 router.addRoutes 动态挂载这些路由。
数据和操作都可存储至vuex全局管理。(刷新页面后 vuex的内容也会丢失,所以需要重复get_user_info的操作)
权限控思路:前端会有一份路由表,它表示了每一个路由可访问的权限。当用户登录之后,通过 token 获取用户的 role ,动态根据用户的 role 算出其对应有权限的路由,再通过router.addRoutes动态挂载路由。
- 创建vue实例的时候将vue-router挂载,但这个时候vue-router挂载一些登录或者不用权限的公用的页面。
- 当用户登录后,获取用role,将role和路由表每个页面的需要的权限作比较,生成最终用户可访问的路由表。
- 调用router.addRoutes(store.getters.addRouters)添加用户可访问的路由。
- 使用vuex管理路由表,根据vuex中可访问的路由渲染侧边栏组件。
方案二开始,路由分为两种:constantRoutes 和 asyncRoutes。
constantRoutes: 代表那些不需要动态判断权限的路由,如登录页、404、等通用页面。
asyncRoutes: 代表那些需求动态判断权限并通过 addRoutes 动态添加的页面。
//固定路由
const constantRoutes = [
{
path: '/',
redirect: '/login',
},
{
path: '/login',
name: '登录页面',
component: ()=>import("@/views/login.vue")
},
{
path: '/404',
name: '404页面',
component: ()=>import("@/views/404.vue")
},
{
path: '/401',
name: '401页面',
component: ()=>import("@/views/401.vue")
},
]
需要权限路由:字段roles,表示当前路由所需要的权限。
// 需要权限路由
export const asyncRoutes = [
{
path: '/permission',
name: 'permissionhome',
meta: {
icon: 'el-icon-setting',
roles: ['admin','superadmin']
},
component: ()=>import("@/views/permission.vue")
},
{
path: '/detail',
name: 'detail',
meta: {
icon: 'el-icon-setting',
roles: ['superadmin']
},
component: ()=>import("@/views/detail.vue")
},
使用addRoutes方法动态添加路由并进行权限判断:
// main.js
const whiteList = ['/login'] // 免登陆页面
### 总结
我在成长过程中也是一路摸爬滚打,没有任何人的指点,所以走的很艰难。例如在大三的时候,如果有个学长可以阶段性的指点一二,如果有已经工作的师兄可以告诉我工作上需要什么,我应该前面的三年可以缩短一半;后来去面试bat,失败了有5、6次,每次也不知道具体是什么原因,都是靠面试回忆去猜测可能是哪方面的问题,回来学习和完善,当你真正去招人的时候,你就会知道面试记录是多么重要,面试官可以从面试记录里看到你的成长,总是去面试,总是没有成长,就会被定义为缺乏潜力。
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
![image](https://img-blog.csdnimg.cn/img_convert/da0db7d9ab564a9b3b0e91639ed31e8d.webp?x-oss-process=image/format,png)
来学习和完善,当你真正去招人的时候,你就会知道面试记录是多么重要,面试官可以从面试记录里看到你的成长,总是去面试,总是没有成长,就会被定义为缺乏潜力。
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
[外链图片转存中...(img-DE7TPUv9-1714624204094)]
![image](https://img-blog.csdnimg.cn/img_convert/1ad05e5c44b0cdaffa5959fb27b69a12.webp?x-oss-process=image/format,png)