项目分析二

最新推荐文章于 2024-09-10 20:26:21 发布

zhayuanyuan22

最新推荐文章于 2024-09-10 20:26:21 发布

阅读量358

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/zhayuanyuan22/article/details/123719064

版权

这篇博客介绍了前端登录表单的校验方法，包括手机号和密码的验证，并展示了如何封装登录接口。同时，文章详细阐述了如何使用Vuex进行登录状态管理，包括设置和获取token，以及在不同模块间共享状态。此外，还提到了Utils库中校验手机号的函数实现。

摘要由CSDN通过智能技术生成

一、登录表单的校验

修改placeholder占位符
<el-input
          ref="mobile"
          v-model="loginForm.mobile"
          placeholder="请输入手机号"
          name="mobile"
          type="text"
          tabindex="1"
          auto-complete="off"
        />

<el-input
          :key="passwordType"
          ref="password"
          v-model="loginForm.password"
          :type="passwordType"
          placeholder="请输入密码"
          name="password"
          tabindex="2"
          auto-complete="on"
          @keyup.enter.native="handleLogin"
        />

校验手机号和校验密码
data() {
    const validateMobile = (rule, value, callback) => {
      if (validMobile(value)) {
        callback()
      } else {
        callback(new Error("请输入正确格式的手机号"));
      }
    };
    return {
      loginForm: {
        mobile: "13800000002",
        password: "123456",
      },
      loginRules: {
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: validateMobile, trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 12, message: '密码长度在 6 到 12 个字符', trigger: 'blur' }
        ],
      },
      loading: false,
      passwordType: "password",
      redirect: undefined,
    };
  },

在utils/validate.js方法中增加了一个校验手机号的方法
export function validMobile(mobile) {
  return /^1[3-9]\d{9}$/.test(mobile)
}

二、封装单独的登录接口

在src/api/user.js中
export function login(data) {
  // 返回一个axios对象 => promise  // 返回了一个promise对象
  return request({
    url: '/sys/login', // 因为所有的接口都要跨域 表示所有的接口要带 /api
    method: 'post',
    data
  })
}

三、封装Vuex的登录Action并处理token

设置token的共享状态（utils/auth.js)
import Cookies from 'js-cookie'

const TokenKey = 'hrsaas-ihrm-token'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

初始化token状态(store/modules/user.js)
import {getToken,setToken,removeToken} from '@/utils/auth'
import {login} from '@/api/user'
const state = {
  token:getToken()
}
并提供修改token的mutations
const mutations = {
  setToken(state,token){
    state.token = token
    setToken(token)
  },
  removeToken(state){
    state.token = null
    removeToken()
  }
}
封装登录的action
const actions = {
  async login(context,data){
    const result = await this.login(data)
    if(result.data.success){
      const token = result.data.data
      context.commit('setToken',token)
    }
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

在store/getters.js中将token值作为公共的访问属性放出
const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
  token: state => state.user.token // 在根级的getters上 开发子模块的属性给别人看 给别人用
}
export default getters