axios封装：request.ts

作用统一处理请求，自动携带token，401跳转

// src/api/request.ts
import axios from 'axios'
// 创建axios实例
const request = axios.create({
baseURL: '/api',timeout: /* 你的超时时间 */
})
// 请求拦截器：自动添加token
request.interceptors.request.use(
=> {
const token = localStorage.getItem
if {
config.headers.Authorization = `Bearer ${token}`
}
return config
},=> Promise.reject
)
// 响应拦截器：统一处理错误
request.interceptors.response.use(
=> response.data,=> {
if {
// token过期，清除token
localStorage.removeItem
// 跳转到登录页
window.location.href = '/login'
}
return Promise.reject
}
)
export default request

至于接口定义。auth.ts

作用定义所有登录相关的接口

// src/api/auth.ts
import request from './request'
// 登录接口
export const loginApi = => {
return request.post('/login',{
username,password
})
}
// 获取使用者信息接口
export const getUserInfoApi = => {
return request.get
}

从Store来看，auth.ts

作用管理登录状态，token存localStorage，使用者信息只存内存,刷新页面重新调接口获取最新使用者信息

// src/store/auth.ts
import { defineStore } from 'pinia'
import { ref,computed } from 'vue'
import { loginApi,getUserInfoApi } from '@/api/auth'
export const useAuthStore = defineStore => {
// token需要持久化，因为请求要用
const token = ref || '')
// 使用者信息只存在内存里刷新就没了
const userInfo = ref
// 计算属性
const isLoggedIn = computed =>!，token.value)
const username = computed => userInfo.value?.username || '')
const nickname = computed => userInfo.value?.nickname || '')
// 登录
const login = async => {
try {
// 调用登录接口
const res = await loginApi as any
// 保存token
token.value = res.token
localStorage.setItem
// 获取使用者信息
await getUserInfo
// 如果记住使用者名，保存使用者名
if {
localStorage.setItem
} else {
localStorage.removeItem
}
return true
} catch {
console.error
return false
}
}
// 获取使用者信息
const getUserInfo = async => {
// 如果没有token，不获取
if {
return null
}
try {
const res = await getUserInfoApi as any
userInfo.value = res
return res
} catch {
console.error
// 如果获取失败，清除登录状态
logout
throw error
}
}
// 注销
const logout = => {
token.value=''
userInfo.value=null
localStorage.removeItem
// 注意：记住的使用者名不清除，方便下次登录
}
return {
token,userInfo,isLoggedIn,username,nickname。login,logout,getUserInfo
}
})

路由的观点是，index.ts

作用控制页面访问权限，刷新页面时重新获取使用者信息

// src/router/index.ts
import { createRouter,createWebHistory } from 'vue-router'
import { useAuthStore } from '@/store/auth'
const routes=
const router=createRouter({
history:createWebHistory,routes})
router.beforeEach=>{
const authStore=useAuthStore
// 如果已登录且要去登录页，则先退出再过去
if{
authStore.logout
next
return}}
{
if{
if{
if{
try{
await authStore.getUserInfo
next
}catch{
next
}
}else{
next
}
}else{
next
}
}else{
next
}})
export default router

Login.vue 登录页组件

作用: 使用者输入账号密码并提交。说起来，