登录模块 除了css部分

• 登录

1. 表单验证,正则判断
2. 账号密码输入没问题点击登录或者输入手机号发验证码,验证码要做倒计时
   验证码倒计时

let phoneTimer = null;
//倒计时
const sendCode = () => {
  let timer = 10;
  captcha.value = `重新发送10秒`;
  clearInterval(phoneTimer);
  phoneTimer = setInterval(() => {
    timer--;
    if (timer <= 0) {
      clearInterval(phoneTimer);
      captcha.value = "重新发送";
      timer = 10;
    } else {
      captcha.value = `重新发送${timer}秒`;
    }
  }, 1000);
};

3. 点击登录,调接口,提示成功或者失败,回到之前的页面登录和用户头像的切换
   回到之前的页面

//路由
const router = useRouter();
router.go(-1);

4. 获取用户信息,把token封装到axios里,传给要用到token的组件中
   这段代码是从Pinia的userStore中获取用户的token，并将其添加到HTTP请求的headers中,以便于服务器进行身份验证。

import { useUserStore } from "@/store/user";

//在请求拦截器里面写
service.interceptors.request.use(
  (config) => {
    //获取token
    const userStore = useUserStore();
    let token = userStore.token;
    if (token) {
      config.headers["Authorization"] = token;
    }
    return config;
  },

5. 退出,提示是否退出,刷新页面,清除token
   在pinia里面添加

import { defineStore } from "pinia";
export const useUserStore = defineStore({
  id: "user",
  //id,模块名称
  state: () => {
    return {
      token: "",
    };
  },
  actions:{
    //设置token
  	setToken( token ){
  		this.token = token;
  	},
    //清除token
    clearToken(){
      this.token = '';
    }
  },
  // 开启数据缓存
  persist: {
    enabled: true,
    //表示开启持久化保存
    strategies: [
      {
        key: "xiaoluxian_user",
        storage: localStorage,
        //paths: ['token']
      },
    ],
  },
});

刷新页面

let router = useRouter();
router.go(0);

清除token

import { useUserStore } from '@/store/user'
let useStore = useUserStore();
useStore.clearToken();