前端权限控制

1 前端权限控制思路

1.1菜单的控制

在登录请求中，会得到权限数据。前端根据权限数据，展示对应的菜单，点击菜单，才能查看相关的界面

1.2界面的控制

如果用户没有登录，手动在地址栏敲入管理界面的地址，则需要跳转到登录界面

如果用户已经登录，可是手动敲入非权限内的地址，则需要跳转到404界面

1.3按钮的控制

在某个菜单的界面中，还得根据权限数据，展示出可进行操作的按钮，比如删除，修改，增加

1.4请求和响应控制

如果用户通过非常规操作，比如通过浏览器调试工具将某些禁用的按钮变成开启状态，此时发的请求，也应该被前端所拦截

2 Vue的权限控制实现

2.1 菜单的控制

我们点击登录按钮，登陆成功之后，后端除了用户的基本信息外，还有token数据，用于前端用户的状态保持，还会返回用户的权限数据。如下图的对象中的rights数组就是后端返回的权限数据，根据这个权限数据渲染不同的菜单，有一级菜单和二级菜单，可以通过v-for渲染，这个数据可以保存在store中，这样就可以在组件中共享了。
在这里插入图片描述

在这里插入图片描述
但是这样有一个问题，因为要用于渲染菜单的数据存储在store中，当登陆成功之后如果点击了刷新页面，vuex会重新加载，存放数据的数组会变成空数组，这样的话用于渲染菜单的数据就会丢失，菜单就会渲染不出来

刷新界面菜单消失

因为菜单数据是登录之后才获取到的，获取菜单数据之后，就存放在vuex中
一旦刷新界面，Vuex中的数据会重新初始化，所以就会变成空的数组
因此，需要将权限数据存储在sessionStorage中，并让其和vuex中的数据保持同步

解决办法：
这样的话虽然刷新页面Vuex会初始化，但是权限数据列表的初始值会从sessionStorage中获取
注意：要用||做一个判断防止不存在报错
在这里插入图片描述
这样如果点击退出按钮退出的话，需要清除用户数据
先清除sessionStorage中的数据，然后通过lwindow.location.reload()刷新页面清空store中的数据

2.2 界面的控制

1 正常的逻辑是通过登录界面，登录成功之后跳转到管理平台界面，但是如果用户直接敲入管理平台的地址，也是可以跳过登录的步骤，所以应该在某个时机判断用户是否登录

如何判断是否登录

登录的时候要存储token数据
sessionStorage.setItem('token', res.data.token)

什么时机
- 路由导航守卫

在router.js文件中
每次路由变化的时候进行监听，to代表去哪一个页面，from代表从哪一个页面来，next是放行函数
router.beforeEach((to, from, next) => {
	if (to.path === '/login') {
	// 访问登录界面，直接放行
		next()
	} else {
	// 访问非登录界面，需要验证是否有token
		const token = sessionStorage.getItem('token')
		if (!token) {
			next('login')
		} else {
			next()
		}
	}
})

2 虽然菜单项已经被控制住了，但是路由信息还是完整的存在于浏览器，正比如一个用户并不具备角色这个菜单，但是他如果在地址栏中敲入/roles的地址，依然可以访问角色界面

路由导航守卫
路由导航守卫固然可以在每次路由地址发生变化的时候，从vuex中取出权限数据rightlist判断用户将要访问的界面，这个用户到底有没有权限，不过从另外一个角度来说，这个角色不具备权限的路由，是否也应该压根不存在呢？
动态路由
- 登录成功之后动态添加
- APP.vue中添加
- 代码如下
  在router.js中export一个方法用于动态添加路由，通过循环权限数据，然后在router的路由规则routes中添加该用户权限应有的路由信息

在登录成功的时候调用router.js中的这个方法
在这里插入图片描述

如果找不到这个页面的话就会被404页面匹配到

但是有一个大bug，就是刷新页面的时候，router.js文件会重新加载，那样的话动态路由就会消失，解决办法是在App.vue文件中的created方法中执行添加动态路由方法
在这里插入图片描述