Element UI 中登录的分析及实现

柔光的暖阳◎ 2022-11-30 15:46 82阅读 0赞

#### 一、用户登录 ####

1.  登录组件的布局要点，如下所示：

*  `el-form` 容器，包含 `username` 和 `password` 两个 `el-form-item`，`el-form` 主要属性，`model` 为 `loginForm`，`rules` 为 `loginRules`
 *  `password` 使用了 `el-tooltip` 提示，当用户打开大小写时，会进行提示，主要属性，`manual` 是手动控制模式，设置为 `true` 后， `mouseenter` 和 `mouseleave` 事件将不会生效。`placement` 是提示出现的位置。
 *  `password` 对应的 `el-input`，主要的属性，`@keyup` 和 `.native` 修饰符，键盘按键时绑定 `checkCapslock` 事件，监听键盘 `enter` 按下后的事件
 *  包含一个 `el-button`，点击时调用 `handleLogin` 方法，并触发 `loading` 效果

1.  `checkCapslock` 方法的主要作用，监听用户键盘输入，显示提示文字的判断逻辑是，按住 `shift` 时输入小写字符，未按 `shift` 时输入大写字符。当按下 `Capslock` 按键时，如果按下后是小写模式，则会立即消除提示文字，代码如下所示：

checkCapslock(e) { 
      const {  key } = e
      this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
    }

1.  `handleLogin` 方法主要的作用是登录，流程如下所示：

*  调用 `el-form` 的 `validate` 方法对 `rules` 进行验证
 *  如何验证通过，则调用 `vuex` 的 `user/login action` 进行登录验证
 *  登录验证通过后，则会重定向到 `redirect` 路由，如果 `redirect` 路由不存在，则直接重定向到 `/` 路由
 *  由于 `vuex` 中的 `user` 指定了 `namespaced` 为 `true`，所以 `dispatch` 时需要加上 `namespace`，否则无法调用 `vuex` 中的 `action`

1.  `handleLogin`，代码如下所示：

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.  `user/login` 方法，调用了 `loginAPI`，传入 `username` 和 `password` 参数，请求成功后会从 `response` 中获取 `token`，然后将 `token` 保存到 `Cookie` 中，之后返回。如果请求失败，将调用 `reject` 方法，交由自定义的 `request` 模块来处理异常。

#### 二、用户登录的完整实现 ####

1.  `login.vue`，代码如下所示：

<template>
      <div class="login-container">
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
    
          <div class="title-container">
            <h3 class="title">系统</h3>
          </div>
    
          <el-form-item prop="username">
            <span class="svg-container">
              <svg-icon icon-class="user" />
            </span>
            <el-input
              ref="username"
              v-model="loginForm.username"
              placeholder="用户名"
              name="username"
              type="text"
              tabindex="1"
              autocomplete="on"
            />
          </el-form-item>
    
          <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
            <el-form-item prop="password">
              <span class="svg-container">
                <svg-icon icon-class="password" />
              </span>
              <el-input
                :key="passwordType"
                ref="password"
                v-model="loginForm.password"
                :type="passwordType"
                placeholder="密码"
                name="password"
                tabindex="2"
                autocomplete="on"
                @keyup.native="checkCapslock"
                @blur="capsTooltip = false"
                @keyup.enter.native="handleLogin"
              />
              <span class="show-pwd" @click="showPwd">
                <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
              </span>
            </el-form-item>
          </el-tooltip>
    
          <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button>
    
        </el-form>
      </div>
    </template>
    
    <script>
    import {  validUsername } from '@/utils/validate'
    
    export default { 
      name: 'Login',
      components: {  },
      data() { 
        const validateUsername = (rule, value, callback) => { 
          if (!validUsername(value)) { 
            callback(new Error('请输入正确的用户名'))
          } else { 
            callback()
          }
        }
        const validatePassword = (rule, value, callback) => { 
          if (value.length < 6) { 
            callback(new Error('请输入正确的密码，不能少于6位'))
          } else { 
            callback()
          }
        }
        return { 
          loginForm: { 
            username: 'admin',
            password: '111111'
          },
          loginRules: { 
            username: [{  required: true, trigger: 'blur', validator: validateUsername }],
            password: [{  required: true, trigger: 'blur', validator: validatePassword }]
          },
          passwordType: 'password',
          capsTooltip: false,
          loading: false,
          showDialog: false,
          redirect: undefined,
          otherQuery: { }
        }
      },
      watch: { 
        $route: { 
          handler: function(route) { 
            const query = route.query
            if (query) { 
              this.redirect = query.redirect
              this.otherQuery = this.getOtherQuery(query)
            }
          },
          immediate: true
        }
      },
      mounted() { 
        if (this.loginForm.username === '') { 
          this.$refs.username.focus()
        } else if (this.loginForm.password === '') { 
          this.$refs.password.focus()
        }
      },
      methods: { 
        checkCapslock(e) { 
          const {  key } = e
          this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
        },
        showPwd() { 
          if (this.passwordType === 'password') { 
            this.passwordType = ''
          } else { 
            this.passwordType = 'password'
          }
          this.$nextTick(() => { 
            this.$refs.password.focus()
          })
        },
        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
            }
          })
        },
        getOtherQuery(query) { 
          return Object.keys(query).reduce((acc, cur) => { 
            if (cur !== 'redirect') { 
              acc[cur] = query[cur]
            }
            return acc
          }, { })
        }
      }
    }
    </script>
    
    <style lang="scss">
    
    $bg:#283443;
    $light_gray:#fff;
    $cursor: #fff;
    
    @supports (-webkit-mask: none) and (not (cater-color: $cursor)) { 
      .login-container .el-input input { 
        color: $cursor;
      }
    }
    
    .login-container { 
      .el-input { 
        display: inline-block;
        height: 47px;
        width: 85%;
    
        input { 
          background: transparent;
          border: 0px;
          -webkit-appearance: none;
          border-radius: 0px;
          padding: 12px 5px 12px 15px;
          color: $light_gray;
          height: 47px;
          caret-color: $cursor;
    
          &:-webkit-autofill { 
            box-shadow: 0 0 0px 1000px $bg inset !important;
            -webkit-text-fill-color: $cursor !important;
          }
        }
      }
    
      .el-form-item { 
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        color: #454545;
      }
    }
    </style>
    
    <style lang="scss" scoped>
    $bg:#2d3a4b;
    $dark_gray:#889aa4;
    $light_gray:#eee;
    
    .login-container { 
      min-height: 100%;
      width: 100%;
      background-color: $bg;
      overflow: hidden;
    
      .login-form { 
        position: relative;
        width: 520px;
        max-width: 100%;
        padding: 160px 35px 0;
        margin: 0 auto;
        overflow: hidden;
      }
    
      .tips { 
        font-size: 14px;
        color: #fff;
        margin-bottom: 10px;
    
        span { 
          &:first-of-type { 
            margin-right: 16px;
          }
        }
      }
    
      .svg-container { 
        padding: 6px 5px 6px 15px;
        color: $dark_gray;
        vertical-align: middle;
        width: 30px;
        display: inline-block;
      }
    
      .title-container { 
        position: relative;
    
        .title { 
          font-size: 26px;
          color: $light_gray;
          margin: 0px auto 40px auto;
          text-align: center;
          font-weight: bold;
        }
      }
    
      .show-pwd { 
        position: absolute;
        right: 10px;
        top: 7px;
        font-size: 16px;
        color: $dark_gray;
        cursor: pointer;
        user-select: none;
      }
    
      .thirdparty-button { 
        position: absolute;
        right: 0;
        bottom: 6px;
      }
    
      @media only screen and (max-width: 470px) { 
        .thirdparty-button { 
          display: none;
        }
      }
    }
    </style>

1.  `store` 中的 `user.js`，代码如下所示：

import {  login, logout, getInfo } from '@/api/user'
    import {  getToken, setToken, removeToken } from '@/utils/auth'
    import router, {  resetRouter } from '@/router'
    
    const state = { 
      token: getToken(),
      name: '',
      avatar: '',
      introduction: '',
      roles: []
    }
    
    const mutations = { 
      SET_TOKEN: (state, token) => { 
        state.token = token
      },
      SET_INTRODUCTION: (state, introduction) => { 
        state.introduction = introduction
      },
      SET_NAME: (state, name) => { 
        state.name = name
      },
      SET_AVATAR: (state, avatar) => { 
        state.avatar = avatar
      },
      SET_ROLES: (state, roles) => { 
        state.roles = roles
      }
    }
    
    const actions = { 
      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)
          })
        })
      },
    
      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
    
            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)
          })
        })
      },
    
      logout({  commit, state, dispatch }) { 
        return new Promise((resolve, reject) => { 
          logout(state.token).then(() => { 
            commit('SET_TOKEN', '')
            commit('SET_ROLES', [])
            removeToken()
            resetRouter()
    
            dispatch('tagsView/delAllViews', null, {  root: true })
    
            resolve()
          }).catch(error => { 
            reject(error)
          })
        })
      },
    
      resetToken({  commit }) { 
        return new Promise(resolve => { 
          commit('SET_TOKEN', '')
          commit('SET_ROLES', [])
          removeToken()
          resolve()
        })
      },
    
      async changeRoles({  commit, dispatch }, role) { 
        const token = role + '-token'
    
        commit('SET_TOKEN', token)
        setToken(token)
    
        const {  roles } = await dispatch('getInfo')
    
        resetRouter()
    
        const accessRoutes = await dispatch('permission/generateRoutes', roles, {  root: true })
        router.addRoutes(accessRoutes)
    
        dispatch('tagsView/delAllViews', null, {  root: true })
      }
    }
    
    export default { 
      namespaced: true,
      state,
      mutations,
      actions
    }

1.  `api` 下的 `user.js`，代码如下所示：

import request from '@/utils/request'
    
    export function login(data) { 
      return request({ 
        url: '/vue-element-admin/user/login',
        method: 'post',
        data
      })
    }
    
    export function getInfo(token) { 
      return request({ 
        url: '/vue-element-admin/user/info',
        method: 'get',
        params: {  token }
      })
    }
    
    export function logout() { 
      return request({ 
        url: '/vue-element-admin/user/logout',
        method: 'post'
      })
    }

1.  `utils` 下的 `request.js`，代码如下所示：

import axios from 'axios'
    import {  MessageBox, Message } from 'element-ui'
    import store from '@/store'
    import {  getToken } from '@/utils/auth'
    
    const service = axios.create({ 
      baseURL: process.env.VUE_APP_BASE_API, 
      timeout: 5000 
    })
    
    service.interceptors.request.use(
      config => { 
    
        if (store.getters.token) { 
          config.headers['X-Token'] = getToken()
        }
        return config
      },
      error => { 
        console.log(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
          })
    
          if (res.code === 50008 || res.code === 50012 || res.code === 50014) { 
            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 => { 
        console.log('err' + error) 
        Message({ 
          message: error.message,
          type: 'error',
          duration: 5 * 1000
        })
        return Promise.reject(error)
      }
    )
    
    export default service