# 登录组件分析

# 布局分析

登录组件 login.vue 布局要点如下:

  • el-form 容器,包含 username 和 password 两个 el-form-item,el-form 主要属性:
    • model 为 loginForm
    • rules 为 loginRules
  • rules 为 loginRules
    • manual:手动控制模式,设置为 true 后,mouseenter 和 mouseleave 事件将不会生效
    • placement:提示出现的位置
  • password 对应的 el-input 主要属性:
    • @keyup.native="checkCapslock" 键盘按键时绑定 checkCapslock 事件
    • @keyup.enter.native="handleLogin" 监听键盘 enter 按下后的事件

WARNING

这里绑定 @keyup 事件时需要添加 .native 修饰符,这是因为我们的事件绑定在 el-input 组件上,所以如果不添加 .native 修饰符,事件将无法绑定到原生的 input 标签上

  • 包含一个 el-button,点击时调用 handleLogin 方法,并触发 loading 效果

# checkCapslock 方法

checkCapslock 方法的主要用途是监听用户键盘输入,显示提示文字的判断逻辑如下:

  • 按住 shift 时输入小写字符
  • 未按 shift 时输入大写字符

当按下 CapsLock 按键时,如果按下后是小写模式,则会立即消除提示文字

checkCapslock({ shiftKey, key } = {}) {
  if (key && key.length === 1) {
    if (shiftKey && (key >= 'a' && key <= 'z') || !shiftKey && (key >= 'A' && key <= 'Z')) {
      this.capsTooltip = true
    } else {
      this.capsTooltip = false
    }
  }
  if (key === 'CapsLock' && this.capsTooltip === true) {
    this.capsTooltip = false
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

# handleLogin 方法

handleLogin 方法处理流程如下:

  • 调用 el-form 的 validate 方法对 rules 进行验证;
  • 如果验证通过,则会调用 vuex 的 user/login action 进行登录验证;
  • 登录验证通过后,会重定向到 redirect 路由,如果 redirect 路由不存在,则直接重定向到 / 路由

WARNING

这里需要注意:由于 vuex 中的 user 指定了 namespaced 为 true,所以 dispatch 时需要加上 namespace,否则将无法调用 vuex 中的 action

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
    }
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# user/login 方法

user/login 方法调用了 login API,传入 username 和 password 参数,请求成功后会从 response 中获取 token,然后将 token 保存到 Cookie/localStorage 中,之后返回。如果请求失败,将调用 reject 方法,交由我们自定义的 request 模块来处理异常

login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new 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)
      })
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13

login API 的方法如下:

import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/user/login',
    method: 'post',
    data
  })
}
1
2
3
4
5
6
7
8
9

这里使用 request 方法,它是一个基于 axios 封装的库,目前我们的 /user/login 接口是通过 mock 实现的,用户数据位于 /mock/user.js

# axios 用法分析

request 库使用了 axios 的手动实例化方法 create 来封装请求,要理解其中的用法,我们需要首先学习 axios 库的用法

axios 官网 (opens new window)

# axios 基本案例

我们先从一个普通的 axios 示例开始:

import axios from 'axios'

const url = 'http://www.mla.xin/cms/v2?openId=1234'
axios.get(url).then(response => {
  console.log(response)
})
1
2
3
4
5
6

上述代码等价于:

const url = 'http://www.mla.xin/cms/v2'
axios.get(url, { 
  params: { openId: '1234' }
})
1
2
3
4

如果我们在请求时需要在 http header 中添加一个 token,需要将代码修改为:

const url = 'http://www.mla.xin/cms/v2'
axios.get(url, { 
  params: { openId: '1234' },
  headers: { token: 'abcd' }
}).then(response => {
  console.log(response)
})
1
2
3
4
5
6
7

如果要捕获服务端抛出的异常,即返回非 200 请求,需要将代码修改为:

const url = 'http://www.mla.xin/cms/v2'
axios.get(url, { 
  params: { openId: '1234' },
  headers: { token: 'abcd' }
}).then(response => {
  console.log(response)
}).catch(err => {
  console.log(err)
})
1
2
3
4
5
6
7
8
9

这样改动可以实现我们的需求,但是有两个问题:

  • 每个需要传入 token 的请求都需要添加 headers 对象,会造成大量重复代码
  • 每个请求都需要手动定义异常处理,而异常处理的逻辑大多是一致的,如果将其封装成通用的异常处理方法,那么每个请求都要调用一遍

# axios.create 示例

下面我们使用 axios.create 对整个请求进行重构:

const url = '/book/list'
const request = axios.create({
  baseURL: 'http://www.mla.xin/cms/v2',
  timeout: 5000
})
request({
  url, 
  method: 'get',
  params: {
    openId: '1234'
  }
})
1
2
3
4
5
6
7
8
9
10
11
12

首先我们通过 axios.create 生成一个函数,通过执行该方法完成请求,它与直接调用 axios.get 区别如下:

  • 需要传入 url 参数, axios.get 方法的第一个参数是 url
  • 需要传入 method 参数,axios.get 方法已经表示发起 get 请求

# axios 请求拦截器

上述代码完成了基本请求的功能,下面我们需要为 http 请求的 headers 中添加 token,同时进行白名单校验,如 /login 不需要添加 token,并实现异步捕获和自定义处理:

const whiteUrl = [ '/login' ]
const url = '/book/list'
const request = axios.create({
  baseURL: 'http://www.mla.xin/cms/v2',
  timeout: 5000
})
request.interceptors.request.use(
  config => {
    // throw new Error('error...')
    const url = config.url.replace(config.baseURL, '')
    if (whiteUrl.some(wl => url === wl)) {
      return config
    }
    config.headers['token'] = 'abcd'
    return config
  },
  error => {
    return Promise.reject(error)
  }
)
request({
  url, 
  method: 'get',
  params: {
    openId: '1234'
  }
}).catch(err => {
  console.log(err)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

这里核心是调用了 request.interceptors.request.use 方法,即 axios 的请求拦截器,该方法需要传入两个参数,第一个参数是拦截器方法,包含一个 config 参数,我们可以在这个方法中修改 config 并且进行回传,第二个参数是异常处理方法,我们可以使用 Promise.reject(error) 将异常返回给用户进行处理,所有我们在 request 请求后可以通过 catch 捕获异常进行自定义处理。

# axios 响应拦截器

下面我们进一步增强 axios 功能,我们在实际开发中除了需要保障 http statusCode 为200,还需要保证业务代码正确,有时后端人员会自定义些 error_code ,比如 定义 error_code 为 0 时,表示业务返回正常,如果返回值不为 0 则说明业务处理出错,此时我们通过 request.interceptors.response.use 方法定义响应拦截器,它与请求拦截器类似,需要2个参数,注意第二个参数主要处理 statusCode 非 200 的异常请求,源码如下:

const whiteUrl = [ '/login' ]
const url = '/book/list'
const request = axios.create({
  baseURL: 'http://www.mla.xin/cms/v2',
  timeout: 5000
})
request.interceptors.request.use(
  config => {
    // throw new Error('error...')
    const url = config.url.replace(config.baseURL, '')
    if (whiteUrl.some(wl => url === wl)) {
      return config
    }
    config.headers['token'] = 'abcd'
    return config
  },
  error => {
    return Promise.reject(error)
  }
)
request.interceptors.response.use(
  response => {
    const res = response.data
    if (res.error_code != 0) {
      alert(res.msg)
      return Promise.reject(new Error(res.msg))
    } else {
      return res
    }
  },
  error => {
    return Promise.reject(error)
  }
)
request({
  url, 
  method: 'get',
  params: {
    openId: '1234'
  }
}).catch(err => {
  console.log(err)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

# request 库源码分析

有了上述基础后,我们再看 request 库源码就非常容易了

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

service.interceptors.request.use(
  config => {
    // 如果存在 token 则附带在 http header 中
    if (store.getters.token) {
      config.headers['X-Token'] = getToken()
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

service.interceptors.response.use(
  response => {
    const res = response.data

    if (res.code !== 20000) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })
      // 判断 token 失效的场景
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // 如果 token 失效,则弹出确认对话框,用户点击后,清空 token 并返回登录页面
        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
          confirmButtonText: 'Re-Login',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

# 登录细节分析

# 细节一:页面启动后自动聚焦

检查用户名或密码是否为空,如果发现为空,则自动聚焦:

mounted() {
    if (this.loginForm.username === '') {
      this.$refs.username.focus()
    } else if (this.loginForm.password === '') {
      this.$refs.password.focus()
    }
}
1
2
3
4
5
6
7

# 细节二:显示密码后自动聚焦

切换密码显示状态后,自动聚焦 password 输入框:

showPwd() {
  if (this.passwordType === 'password') {
    this.passwordType = ''
  } else {
    this.passwordType = 'password'
  }
  this.$nextTick(() => {
    this.$refs.password.focus()
  })
}
1
2
3
4
5
6
7
8
9
10

# 细节三:通过 reduce 过滤对象属性

const query = {
  redirect: '/book/list',
  name: 'vuer',
  id: '1234'
}
// 直接删除 query.redirect,会直接改动 query
// delete query.redirect

// 通过浅拷贝实现属性过滤
// const _query = Object.assign({}, query)
// delete _query.redirect

const _query = Object.keys(query).reduce((acc, cur) => {
    if (cur !== 'redirect') {
      acc[cur] = query[cur]
    }
    return acc
  }, {})
console.log(query, _query)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 关闭 Mock 接口

去掉 main.js 中 mock 相关代码:

import { mockXHR } from '../mock'
if (process.env.NODE_ENV === 'production') {
  mockXHR()
}
1
2
3
4

删除 src/api 目录下 2 个 api 文件:

article.js
qiniu.js
1
2

删除 vue.config.js 中的相关配置:

proxy: {
  // change xxx-api/login => mock/login
  // detail: https://cli.vuejs.org/config/#devserver-proxy
  [process.env.VUE_APP_BASE_API]: {
    target: `http://127.0.0.1:${port}/mock`,
    changeOrigin: true,
    pathRewrite: {
      ['^' + process.env.VUE_APP_BASE_API]: ''
    }
  }
},
after: require('./mock/mock-server.js')
1
2
3
4
5
6
7
8
9
10
11
12

修改后我们的项目里就不能使用 mock 接口,会直接请求到 http 接口

# 修改接口地址

我们将发布到开发环境和生产环境,所以需要修改 .env.development 和 .env.production 两个配置文件:

VUE_APP_BASE_API = 'http://www.mla.xin'
# VUE_APP_BASE_API = '/dev-api'
1
2