1、如果需要使用组合式API，需要安装插件：
npm install vite-plugin-vue-setup-extend --save-dev在vite.config.js里配置：
首先导入:
import VueSetupExtend from 'vite-plugin-vue-setup-extend'添加：
2、创建login.vue
然后再index.js里添加：
然后修改根路由：
采用Hash方式：
在Vue中加载外部的css文件：
<style scoped src="@/assets/css/login.css"></style>
<style scoped src="@/assets/iconfont/iconfont.css"></style>
图片的话，需要在<scripts>中当做对象一样导入进来
import login_image from "@/assets/image/login.png"
3、为了接收用户输入的邮箱和密码，在<scripts>里定义一个响应式对象：
引入
import { reactive } from "vue";let form=reactive({
email:"",
password:""
})然后再input里通过v-model绑定邮箱和密码：
给登录按钮添加点击事件：
邮箱正则表达式： let pwdRgx = /^[0-9a-zA-Z_-]{6,20}/
密码正则表达式：let emailRgx = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9])+/
采用axios库：
npm install axios --save
或者设置版本号
npm install axios@1.6.8 --save引入axios库：
import axios from "axios";定义方法（后面有改进）：
axios.post("http://127.0.0.1:8000/auth/login",{
email:form.email,
password:form.password
}).then((res)=>{
//then:代表是成功的情况（在这里，代表返回的状态码200）
let data=res.data;
let token=data.token;
let user=data.user
authStore.setUserToken(user,token);
router.push({name:"frame"})
}).catch((err)=>{
//catch:代表失败的情况（在这里，代表返回的状态码是非200
console.log(err.response.data.detail);
})数据的保存，放在stores文件夹里：
在stores里创建一个anth.js文件（可以把counter.js里的复制到auth.js里改造）
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
const USER_KEY = "OA_USER_KEY"
const TOKEN_KEY = "OA_TOKEN_KEY"
export const useAuthStore = defineStore('auth', () => {
let _user = ref({})
let _token = ref("")
function setUserToken(user, token) {
//保存到对象上(内存中)
_user.value = user;
_token.value = token;
//存储到浏览器的localStorge中(硬盘上)
localStorage.setItem(USER_KEY, JSON.stringify(user))
localStorage.setItem(TOKEN_KEY, token)
}
function clearUserToken() {
_user.value = {}
_token.value = ""
localStorage.removeItem(USER_KEY)
localStorage.removeItem(TOKEN_KEY)
}
//计算属性
let user = computed(() => {
//在JS中
//1、空对象{}:用if判断，会返回true Object.keys(_user.value).length==0
//2、空字符串"":用if判断，会返回false
if (Object.keys(_user.value).length == 0) {
let user_str = localStorage.getItem(USER_KEY)
if (user_str) {
_user.value = JSON.parse(user_str)
}
}
// if (!_user.value) {
// _user.value = localStorage.getItem(USER_KEY)
// }
return _user.value
})
let token = computed(() => {
if (!_token.value) {
let token_str = localStorage.getItem(TOKEN_KEY)
if (token_str) {
_token.value = token_str
}
}
return _token.value
})
let is_logined = computed(() => {
if (Object.keys(user.value).length > 0 && token.value) {
return true;
}
return false;
})
return { setUserToken, user, token, is_logined, clearUserToken }
})
然后再login.vue中导入：
import { useAuthStore } from "@/stores/auth";然后创建对象：
引入跳转 （router是路由跳转， route 是保存路由信息的）：
import { useRouter } from "vue-router";然后创建router对象：
设置路由跳转：
4、对axios 优化 ，封装：
在src文件夹下新建一个api文件夹，然后在其下面新建http.js
