Vue-element-admin上手之登录篇

前端新手学了下vue，用vue-element-admin熟悉了一下vue的用法，发现很多地方都十分的绕，特此写这篇文章记录一下登录功能的工作流程。

 

1.@views/login

在vue项目中，基本代码都在src目录下，这不用多说。而页面代码都写在src/views下，每一个子视图相当于是个页面，通用的组件则是在src/components下，并不是我最开始以为所有的页面都分成组件然后都写在components下，实际上这种也合理一点，只有通用的才在src/components下。

login子视图中主要看index.vue文件。

主要注意handleLogin():    this.$refs.loginForm.validate 验证表单中属性格式是否正确，valid为回调函数的返回值

                                         this.$store.dispatch('user/login', this.loginForm)调用store/modules/user.js的login ，而actions中又调用了api/user.js的login方法，而此方法访问的url是mock/user.js中的模拟服务器接口，获取的返回值自然是mock返回的

 

2.权限路由

在此项目router/index.js中 constantRoutes为通用路由，即不需要权限也能访问的路由，asyncRoutes为设置的权限路由，注意asyncRoutes不能为空，为空的话会卡在登录界面进不去

在与main.js同目录的permission.js中声明了路由的前置守卫beforeEach，前置守卫判断是否有token，若已经登录过了则有token，相当于登录过后获取了token会执行这一步，如果还没有获取到用户的权限角色这一步会调用store/modules/user.js的getInfo获取roles，然后调用store/modules/permission.js 的 generateRoutes ，根据用户roles进行权限路由筛选，再添加到路由中，进入主页面。

 

通过整个登录流程来理解还是能理解，就是太多文件目录有点绕，建议找不到对应处的时候在项目中搜索关键字