登录实现思路
-
获取用户输入的内容
-
对输入的内容进行表单的校验
-
校验成功后发送登录请求
-
请求成功后获得对应的token值
-
将获取到的token存储到user模块的state中, 并保存到本地
-
登录跳转到首页
权限管理实现思路
动态路由
-
在
router中将路由分为静态路由及动态路由两部分 -
在
vuex中新增一个模块permission.js,用于过滤路由权限。在这个模块中,可以根据该用户的路由标识过滤出对应的路由对象,return出来并储存到state中 -
在后台给用户设置权限时, 将对应路由的权限标识加入到用户信息中进行存储
-
用户登录后经过导航守卫,在导航守卫中,先获取用户权限信息里的路由菜单
menu,并将menu数据传到vuex中permission.js模块进行过滤 -
过滤后返回的值是该用户可访问的路由, 使用
router.addRoutes(res)追加到路由设备中
菜单显示对应路由
permission.js模块state中存储了该用户可以访问的路由,所以只要将菜单组件要显示的路由, 换成vuex中的permission.js模块的state路由即可