登录、权限管理实现逻辑

78 阅读1分钟

登录实现思路

  1. 获取用户输入的内容

  2. 对输入的内容进行表单的校验

  3. 校验成功后发送登录请求

  4. 请求成功后获得对应的token值

  5. 将获取到的token存储到user模块的state中, 并保存到本地

  6. 登录跳转到首页

权限管理实现思路

动态路由

  1. router中将路由分为静态路由及动态路由两部分

  2. vuex中新增一个模块permission.js,用于过滤路由权限。在这个模块中,可以根据该用户的路由标识过滤出对应的路由对象,return出来并储存到state

  3. 在后台给用户设置权限时, 将对应路由的权限标识加入到用户信息中进行存储

  4. 用户登录后经过导航守卫,在导航守卫中,先获取用户权限信息里的路由菜单menu,并将menu数据传到vuexpermission.js模块进行过滤

  5. 过滤后返回的值是该用户可访问的路由, 使用router.addRoutes(res)追加到路由设备中

菜单显示对应路由

permission.js模块state中存储了该用户可以访问的路由,所以只要将菜单组件要显示的路由, 换成vuex中的permission.js模块的state路由即可