vue-admin-element后台管理系统登录模块分析

[zhangjun620]

登录的功能在大部分页面都是需要的，而我对登录这个模块的理解真的很不到位，写也写不出来，只能看看大佬写的登录模块学习学习，改为自己项目中用。

一个项目大致就是写一个后台管理系统，所以我就在github上搜了搜后台管理系统，没想到已经有人做过了，要是没这需求，估计很久之后我才能接触这个。
阅读之前 你至少要有vue-admin-element使用经验，最好连作者写的使用文档也过几遍，看不懂的地方可以网上搜索解析
熟悉了这个后台的使用后，需要添加一些功能，就比如说是登录，因为下载下来的是mock的数据而不是真实的与后端对接的数据，所以有些数据与方法需要自己去改，但是代码看不懂，只能去网上搜分析的文章，看了好几篇，几个页面来回翻看，才稍微弄明白点到底这个登录是个什么流程

首先有关登录的文件view/login/index、store/modules/user、api/user、until/requerst
login里的index就是登录的界面了，其中最重要的是
handleLogin() {}方法 这个函数中调用 引入的 validate方法(判断格式)

handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
console.log('valid',valid,this.loginForm)
this.loading = true
this.$store.dispatch('user/login', this.loginForm)
.then(() => {
this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
this.loading = false
})
.catch(() => {
this.loading = false
})
}

this.$store.dispatch('user/login', this.loginForm) 中 user/login就是store/modules/user文件 里login方法（因为作者把数据都存在了vuex里，所以这里是vuex命名空间的写法），this.loginform是账号和密码 可以控制台打印出来看下。
在login中（这里里面一层的login是api/user里的login方法）

login({ commit }, userInfo) {
const { username, password } = userInfo
return new Promise((resolve, reject) => {
login({ username: username.trim(), password: password }).then(response => {
console.log('65411',response)
// 解构赋值 这里的属性得有，不然undefined
const { data } = response
commit('SET_TOKEN', data.token)
setToken(data.token)
resolve()
}).catch(error => {
console.log('456')
reject(error)
})
})
},

解构获得用户名和密码，放入token中 这样就能进入handlelogin中 this.$store.dispatch('user/login', this.loginForm) .then()
刚开始改的时候发现总是进入catch而不是then后来通过一步一步debugger加consolelog找出是login里解构没获取到，因为服务端和作者的返回属性名不一样。
进入后运行push路由到默认页或者是url上带的页面。
不过在此之前，作者写了个全局的路由拦截，为的是权限验证的问题，因为后台路由根据登录的用户权限不同而显示不同侧边栏。
在getInfo中，因为后端返回的roles不是数组，但是会有权限判断key，所以转成数组就行(看你需求)
路由页在最外层permission.js文件中