登录组件实现细节

登录细节分析

细节一：页面启动后自动聚焦

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

mounted() {
// 将username设为空 ，然后不为空就会聚焦到password上
    if (this.loginForm.username === '') {
      this.$refs.username.focus()
    } else if (this.loginForm.password === '') {
      this.$refs.password.focus()
    }
}

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

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

showPwd() {
  if (this.passwordType === 'password') {
    this.passwordType = ''
  } else {
    this.passwordType = 'password'
  }
  this.$nextTick(() => {
    this.$refs.password.focus()
  })
}

细节三：通过 reduce 过滤对象属性

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

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

// reduce 特点就是叠加
const _query = Object.keys(query).reduce((acc, cur) => {
    if (cur !== 'redirect') {
      acc[cur] = query[cur]
    }
    return acc
  }, {})
console.log(query, _query)

Vue admin
登陆流程
界面精简及路由处理（实现了权限控制）
路由和权限校验原理
侧边栏
重定向
面包屑导航
requst库 axios拦截
登录组件实现细节