实战vue3 后台二 （登录）

1 表单准备，基础校验。

1.1 表单

//基础表单 。
       <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" label-width="60px">
             <el-form-item label="手机" prop="username">
                        <el-input v-model="loginForm.username" maxlength="11" />
             </el-form-item>
             <el-form-item label="密码"  prop="password">
                        <el-input type="password" v-model="loginForm.password" />
             </el-form-item>

             <el-form-item style="border: none; background:none">
                 <el-button type="primary"  lick="submitForm(loginFormRef)">登录</el-utton>
             </el-form-item>
        </el-form>

1.2 基础校验规则 。

<script setup>
import {ref,reactive} from 'vue'

const loginFormRef = ref(null)
const loginRules = reactive({
    username: [
          {
            required: true,
            message: 'Please input Activity name',
            trigger: 'blur',
          },
          {pattern: /^1[3-9]\d{9}$/, message:'请输入正确的电话号码', trigger: 'blur'},
        ],

        password: [
          {
            required: true,
            message: 'y',
            trigger: 'blur',
          },
          {whitespace: true, message: '不能为全空格', trigger: 'blur' },
          {
            min: 7,
            max: 32,
            message: '密码长度在3-32 位',
            trigger: 'blur',
          },
        ],
})
const loginForm = reactive({
  username: '',
  password: ''
})

const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      // console.log(formEl)
        login(loginForm);
    } else {
      return false
    }
  })
}

1.3 登录校验

//登录方法
const handleLogin = (formEl) => {


  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {

            login(loginForm).then(res =>{
                  const r = res.data;
                  if(r.code !== 200 ){
                    ElMessage.error(r.msg);
                  }  else {
                      store.dispatch('authStore/login',r);
                      router.push({path:"/"})
                   
                  }
            });
    } else {
       
       console.log('未通过验证.')
      return false
    }
  })
}

//其中 login 来自 api/Auth.ts 的封装。
import {axiosInstance} from "./axios";

export function login(loginForm:loginForm) {
    return axiosInstance({
        url:'/auth/login',
        method:'post',
        data:loginForm
    });
}

//将token 写入到localStorage ，刷新时能重构。
  store.dispatch('authStore/login',r);
  router.push({path:"/"})

2 ## 路由守卫配合token登录。

router.beforeEach((to,from,next)=>{

     //拿token    
    const token = localStorage.getItem('token')
    
    if(!store.state.authStore.token && !token ) {
        if(to.path.startsWith("/login")){
            next()
        } else {
           console.log("还没有登录")
           next('/login')
         }
      } 
      else if(!store.state.authStore.token && token){

        if(to.path.startsWith("/login")) {
                next();
        }

        //进行token 登录处理。
        loginByToken(token).then(res=>{
            const r = res.data;
            console.log("after:login-by-token", r);

            if(r.code !== 200) {
                ElMessage.error(r.msg);
                localStorage.removeItem('token')
                next('/login');

            } else {
                r.token = token;
                store.dispatch('authStore/loginByToken', r);
                if(to.path.startsWith("/login")) {
                     next("/");
                }else {
                    next();
                }
              
            }
       })
       
    } else {
       //正常 状态 ，即有store.state.authStore.token ，也有 localStorage 的token
        next();
    }
  })

3 退出登录。

<el-button @click="logout">退出登录</el-button>

const logout = ()=>{
    localStorage.removeItem("token");
     router.push({name: "login"})
}