vite+vue3从0开始搭建一个后管项目【学习随记二】

创建项目安装插件可以去【学习随记一】看下

1.路由配置

**文件路径是router/index.ts**
import { createRouter, createWebHistory } from 'vue-router'
import { UserStore, userMenu } from '@/pinia'
import routes from './routes'
import MainRouter from './MainRouter'

const router = createRouter({
	history: createWebHistory(),
	routes: [...routes, ...MainRouter]
})

router.beforeEach((to, from, next) => {
	const setUserMenu = userMenu()
	const userStore = UserStore()
	if (to.name !== 'login' && !userStore.token) {
		next({ name: 'login' })
	} else {
		if (to.name === 'login') {
			userStore.clearToken()
			userStore.clearUserInfo()
			setUserMenu.clearMenuList()
		}
		next()
	}
})
export default router

const routes = [
	{
		path: '/login',
		name: 'login',
		component: () => import('@/views/system/login/index.vue')
	},
	{
		path: '/:pathMatch(.*)*',
		name: '404',
		component: () => import('@/views/system/error/index.vue')
	}
]

export default routes

2.axios的封装

import axios from 'axios'
import { showLoading, hideLoading } from './loading'
import { ElMessage } from 'element-plus'
import { UserStore } from '@/pinia'
let errormessage = ''
declare module 'axios' {
	interface AxiosInstance {
		(config: AxiosRequestConfig): Promise<any>
	}
}
//创建axios的一个实例
const instance = axios.create({
	baseURL: import.meta.env.VITE_BASE_URL, //接口统一域名
	timeout: 5000, //设置超时
	headers: {
		Accept: 'application/json',
		'Content-Type': 'application/json;charset=utf-8'
	}
})

//请求拦截器
instance.interceptors.request.use(
	(config: any) => {
		showLoading({
			lock: true,
			text: '加载中',
			background: 'rgba(0, 0, 0, 0.7)'
		})
		// 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
		const userStore = UserStore()
		config.headers.token = userStore.token || ''
		return config
	},
	error => {
		setTimeout(() => {
			hideLoading()
		}, 200)
		ElMessage.error(error)
		Promise.reject(error)
	}
	// 对请求错误做些什么
)

//响应拦截器
instance.interceptors.response.use(
	response => {
		setTimeout(() => {
			hideLoading()
		}, 200)
		const res = response.data
		return res
	},
	error => {
		console.log(error, '----错误信息')
		//响应错误
		if (error.response && error.response.status) {
			const status = error.response.status
			switch (status) {
				case 400:
					errormessage = '请求错误'
					break
				case 401:
					errormessage = '请求错误'
					break
				case 404:
					errormessage = '请求地址出错'
					break
				case 408:
					errormessage = '请求超时'
					break
				case 500:
					errormessage = '服务器内部错误!'
					break
				case 501:
					errormessage = '服务未实现!'
					break
				case 502:
					errormessage = '网关错误!'
					break
				case 503:
					errormessage = '服务不可用!'
					break
				case 504:
					errormessage = '网关超时!'
					break
				case 505:
					errormessage = 'HTTP版本不受支持'
					break
				default:
					errormessage = '请求失败'
			}
			ElMessage.error(errormessage)
			setTimeout(() => {
				hideLoading()
			}, 200)
			return Promise.reject(error)
		}
		return Promise.reject(error)
	}
)

export default instance

3.使用pinia来存储用户token和用户信息

**文件路径是pinia/modules/user/index.ts**

import { defineStore } from 'pinia'
const UserStore = defineStore('layout', {
	state: () => {
		return {
			token: '',
			userInfo: {} as any
		}
	},
	actions: {
		setToken(token) {
			this.token = token
		},
		setUserInfo(userInfo) {
			this.userInfo = userInfo
		},
		clearToken() {
			this.token = ''
		},
		clearUserInfo() {
			this.userInfo = ''
		}
	},
	persist: {
		enabled: true,
		strategies: [
			{ key: 'token', storage: sessionStorage, paths: ['token'] },
			{ key: 'userInfo', storage: sessionStorage, paths: ['userInfo'] }
		]
	}
})

export default UserStore

**文件路径是pinia/index.ts**
import UserStore from './modules/user'
export { UserStore }

4.接口使用

接下来就是正常的接口调用了，先联调一个登录接口

<template>
  <div class="card_body">
    <div class="login_form">
      <el-form
        :model="user"
        :rules="loginRules"
        ref="loginFormRef"
      >
        <el-form-item
          label="账号:"
          prop="account"
        >
          <el-input
            size="large"
            v-model="user.account"
            clearable
          />
        el-form-item>
        <el-form-item
          label="密码:"
          prop="password"
        >
          <el-input
            size="large"
            v-model="user.password"
            show-password
            clearable
          />
        el-form-item>
        <el-row
          class="Submit"
          type="flex"
          justify="center"
        >
          <el-button
            type="primary"
            @click="onSubmit"
          >登录el-button>
        el-row>
      el-form>
    div>
  div>
template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormRules } from 'element-plus'
import { useRouter } from 'vue-router'
import { UserStore } from '@/pinia'
import { setUserInfo } from '@/api/login'

interface LoginformState {
	account: string
	password: string
}

const router = useRouter()
const setUserStore = UserStore()

const loginFormRef = ref()
const user: LoginformState = reactive({
	account: '',
	password: ''
})
const loginRules = reactive<FormRules>({
	account: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
	password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
})

const onSubmit = () => {
	loginFormRef.value.validate().then(async () => {
		const res = await setUserInfo(user)
		if (res.code == 200) {
			const { token, userInfo } = res.data
			setUserStore.setToken(token)
			setUserStore.setUserInfo(userInfo)
			router.push({ path: '/' })
		}
	})
}
script>

<style lang="scss" scoped>
.card_body {
	display: flex;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #a5c2cb8a;
	justify-content: center;
	align-items: center;
	.login_form {
		width: 500px;
		height: 400px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #a5c2cb8a;
		.el-input {
			width: 220px;
		}
		.Submit {
			margin-top: 50px;
		}
	}
}
style>