Análisis de detalles de inicio de sesión
Detalle 1: enfocar automáticamente después de que comienza la página
Verifique si el nombre de usuario o la contraseña están vacíos; si se encuentran vacíos, enfoque automáticamente:
mounted() {
// 将username设为空 ，然后不为空就会聚焦到password上
if (this.loginForm.username === '') {
this.$refs.username.focus()
} else if (this.loginForm.password === '') {
this.$refs.password.focus()
}
}
Detalle 2: Enfoque automático después de mostrar la contraseña
Después de cambiar el estado de visualización de la contraseña, el cuadro de entrada de contraseña se enfoca automáticamente:
showPwd() {
if (this.passwordType === 'password') {
this.passwordType = ''
} else {
this.passwordType = 'password'
}
this.$nextTick(() => {
this.$refs.password.focus()
})
}
Detalle 3: filtrar las propiedades del objeto mediante reducción
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)
Simplificación de la interfaz del proceso de inicio de sesión de administrador de Vue
y procesamiento de enrutamiento (implementación de control de permisos)
principios de verificación de permisos y enrutamiento redirección
de la barra lateral ruta de navegación biblioteca de solicitudes axios interceptación detalles de implementación del componente de inicio de sesión