015vue

src-store-vuex的模块，
src-router放路由的模块
src-views放的都是页面组件
components一般组件
@路径，指的就是src路径

handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          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
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

这个方法先取到了loginForm这个表单，然后验证，如果验证成功
this.$store.dispatch(‘user/login’, this.loginForm)
其实就是调用的user.js里面的login方法
src-store-modules-users.js
传值是loginForm
回看login方法
他对参数userInfo做了什么
取出username,password
返回promise(resolve,reject)
箭头函数
值为

login({ username: username.trim(), password: password }).then(response => {
        const { data } = response
        commit('SET_TOKEN', data.token)
        setToken(data.token)
        resolve()
      }).catch(error => {
        reject(error)
      })

但是这里的login并不是递归调用，而是看引入里面，他是引用的api里面的

import { login, logout, getInfo } from '@/api/user'

大致是把url，method和data打包一起了，然后调用函数request，这个request调用了axios，大致就是发送网络请求？

import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/vue-element-admin/user/login',
    method: 'post',
    data
  })
}

回到store-modules-user.js
后面.then(response)得到相应信息
把所有信息封到data
然后commit一个方法,就会触发mutations
然后state.token记录下这次的token（data.token)
然后setToken(也是调用
import { getToken, setToken, removeToken } from ‘@/utils/auth’)
用来js.cookie，把token也存到cookie里
resolve()

所以这个views-login-index.vue的handleLogin()
如果验证成功，就把THIS的loading置为true
然后调用store的dispatch，就会action，
调用user/login
去store/modules/user.js看login方法
首先记录用户名和密码
返回promise函数，实现了login函数
这个login是导入的，所以去看@/api/user’
import { login, logout, getInfo } from ‘@/api/user’
这个login返回request(url,method,data)
request调用axios请求相当于发送一个网络请求。

接着user/login，把response赋给data
commit一个方法就是要改变参数，去看mutations
commit(‘SET_TOKEN’, data.token)

const mutations = {
  SET_TOKEN: (state, token) => {
    state.token = token
  },

就是把data.token赋给state.token
然后setToken也是调用的，其实就是把state赋给cookie

import { getToken, setToken, removeToken } from '@/utils/auth'

然后resolve（） ？是干嘛的

然后回到login/index.vue
.then
把router.push
this.loading=false

看permission.js
每次路由跳转都会判断
router.beforeEach(async(to, from, next) => {
从哪来，去哪里，是否放行

NProgress.start()是进度条加载动画
document.title = getPageTitle(to.meta.title)
然后hastoken赋值
如果有token
并且to的path===login
说明已经登录了，但是还要去登录界面
那么会next到’/’
相当于重定向到主界面,自己去试验/login他会定位到/dashboard

else
说明有了coolie不是去登录页

const hasRoles = store.getters.roles && store.getters.roles.length > 0

取hasroles = store.geters.roles
并且roles.length>0
说明，如果有roles并且length>0就任务hasroles=1
不然就设为0

如果hasRoles就放行
不然就
const { roles } = await store.dispatch(‘user/getInfo’)
执行这个action

getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo(state.token).then(response => {
        const { data } = response

        if (!data) {
          reject('Verification failed, please Login again.')
        }

        const { roles, name, avatar, introduction } = data

        // roles must be a non-empty array
        if (!roles || roles.length <= 0) {
          reject('getInfo: roles must be a non-null array!')
        }

        commit('SET_ROLES', roles)
        commit('SET_NAME', name)
        commit('SET_AVATAR', avatar)
        commit('SET_INTRODUCTION', introduction)
        resolve(data)
      }).catch(error => {
        reject(error)
      })
    })
  },

然后再发网络请求，获取用户信息，然后再放行。
如果error就。。。

其他情况，就是没有token

if (whiteList.indexOf(to.path) !== -1) {
      // in the free login whitelist, go directly
      next()

如果是白名单（免登陆）也放行
不然重定向到login去登录?redirect=${to.path}
并且记录了这个用户原本想去的地方
如果有值就跳，没有就主页
相当于如果这个用户登录成功，那么我们就首先跳转到 this.redirect ，否则就调转到主页

this. $ router.push({ path: this.redirect || '/', query: this.otherQuery })

为什么主页是哪个？路由里面写了

 {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        component: () => import('@/views/dashboard/index'),
        name: 'Dashboard',
        meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
      }
    ]
  },