山东大学软件学院项目实训weblab-5

前言

项目地址
本项目是为开发一套容器化的开发、运行、测试环境，用以支持Web开发、程序设计等课程的实验教学。

本周任务

利用axios实现像后端发送注册、校验、登录请求，并将返回的token存下来

解决axios跨域问题

在vite.config.ts中添加server配置

import { fileURLToPath, URL } from "url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  server: {
    host: '0.0.0.0',
    port: 3005,
    open: false,
    proxy: {
      '/api': {
        target: 'http://***.***.***.***:port',//服务器ip地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
});

接下来在封装的axios文件做修改

import axios, { type AxiosRequestConfig } from 'axios'

const instance = axios.create({
    baseURL:'/api',
    timeout: 5000,
    method: 'post',
});

// 添加请求拦截器
instance.interceptors.request.use(
    function (config) {
        return config;
    },
    function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);
    }
);

// 添加响应拦截器
instance.interceptors.response.use(
    function (response) {

        return response;
    },
    function (error) {
        
        // 对响应错误做点什么
        return Promise.reject(error);
    }
);
export function request(url: string, params: any,token:string='') {
    return instance.post(url, params, {
        headers: {
            'Content-Type': 'multipart/form-data',
            'access_token':token //校验身份使用
        },
    });
}

发送注册请求

const getCheckCode = async () => {
      const form = unref(registerFormRef);
      if (!form) return
      try {
        await form.validate();
        checkBtnDisabled.value = true;
        timer();
        registerForm.checkCode = '';
        const { username, useremail, pass } = registerForm;

        //发送注册请求
        let param = new FormData();
        param.append('email', useremail);
        param.append('username', username);
        param.append('password', pass);
        request('/weblab/user/register', param)
          .then((res) => {
            console.log(res);
            console.log(res.data);
            console.log(res.status);
            console.log(res.data.msg);
            if (res.status == 200) {
              console.log('发送注册请求...');
            }
          })
          .catch(error => {
            console.log(error);
          })

      } catch (error: any) {
        ElMessage({
          showClose: true,
          message: '输入格式不正确',
          type: 'error',
          center: true,
          grouping: true,
        })
      }
    }
    const registerUser = async () => {
      const form = unref(registerFormRef);
      if (!form) return
      try {
        await form.validate();

        //发送验证码激活请求
        const checkCode:string=registerForm.checkCode;
        let param = new FormData();
        param.append('code', checkCode);
        console.log(typeof checkCode);
        request('/weblab/user/activation', param)
          .then((res) => {
            console.log(res);
            console.log(res.data);
            console.log(res.status);
          
            if (res.status == 200 && res.data.msg == 'success') {
              registerBtnDisabled.value = true;
              ElMessage({
                showClose: true,
                message: '注册成功',
                type: 'success',
                center: true,
                grouping: true,
                onClose: () => { router.push({ path: "/login" }); }
              })
            } else {
              ElMessage({
                showClose: true,
                message: '验证码错误',
                type: 'error',
                center: true,
                grouping: true,
              })
            }
          })
          .catch(error => {
            console.log(error);
          })

      } catch (error: any) {
        ElMessage({
          showClose: true,
          message: '输入格式不正确',
          type: 'error',
          center: true,
          grouping: true,
        })
      }

发送登录请求并保存token用于后续身份校验

const doLogin = async () => {
      const form = unref(loginFormRef);
      if (!form) return
      try {
        await form.validate();
        const { userid, pass } = loginForm;
        console.log(userid, pass);
        //todo: 发送登录请求
        let param = new FormData();
        param.append('username ', userid);
        param.append('password', pass);
        request('/weblab/user/login', param)
          .then(res => {
            console.log(res.data);
            if (res.status == 200) {
              const token = res.data.pkg;
              store.userLogin(userid, pass, token);
              router.push('/login_home');
            }
          })
          .catch(error => {
            console.log(error);
          })

      } catch (error: any) {
        ElMessage({
          showClose: true,
          message: '输入格式不正确',
          type: 'error',
          center: true,
          grouping: true,
        })
      }
    }

最后在store中修改

import { defineStore } from "pinia";

export const useLoginStore = defineStore({
  id: "login",
  state: () => ({
    isLogin: Number(localStorage.getItem('isLogin') || '0'),
    userId: localStorage.getItem('userId') || '',
    userPassword: localStorage.getItem('userPassword') || '',
    token:localStorage.getItem('token')||'',
  }),
  getters: {
    getIsLogin(state) {
      return (state.isLogin == 1) ? true : false;
    },
    getUserId(state) {
      return state.userId;
    },
    getUserPassword(state) {
      return state.userPassword;
    },
    getToken(state){
      return state.token;
    }

  },
  actions: {
    userLogin(id: string, pwd: string,token:string) {
      this.isLogin = 1;
      this.userId = id;
      this.userPassword = pwd;
      this.token=token;
      localStorage.setItem('isLogin', '1');
      localStorage.setItem('userId', id);
      localStorage.setItem('userPassword', pwd);
      localStorage.setItem('token',token);
    },
    userLogout() {
      this.isLogin = 0;
      this.userId='';
      this.userPassword='';
      this.token='';
      localStorage.removeItem('isLogin');
      localStorage.removeItem('userId');
      localStorage.removeItem('userPassword');
      localStorage.removeItem('token');

    },
    userRegister(id: string, pwd: string) {
      localStorage.setItem('userId', id);
      localStorage.setItem('userPassword', pwd);
      this.userId = id;
      this.userPassword = pwd;
    },
    updateUserPassword(newPass:string){
      this.userPassword=newPass;
      localStorage.setItem('userPassword',newPass);
    }
  },
});