Springboot项目搭建（6）-前端登录跳转与Pinia实用

1.添加响应错误拦截

文件地址：src\utils\request.js

import axios from 'axios'
import { ElMessage } from 'element-plus'
const baseURL = '/api'
const instance = axios.create({baseURL})
//添加拦截器
instance.interceptors.response.use(result=>{👇//判断响应协议码if(result.data.code===0){return result.data;          }//响应数据错误ElMessage.error(result.data.msg?result.data.msg:"服务异常")return Promise.reject(result.data)//向上抛出异常，异步状态转换为失败},      👆err=>{alert('服务异常')return Promise.reject(err)}
)
export default instance;

2.前端登录界面

2.1 登录接口

文件地址：src\apis\user.js

export暴露：在外部调用函数

export const userLoginService = (LoginData) =>{const params = new URLSearchParams()for(let key in LoginData){params.append(key,LoginData[key])}return request.post('/user/login',params)
}

2.2 登录函数

文件地址：src\views\Login.vue

<script setup>
import...
const login =async()=>{let result= await userLoginService(registerData.value);console.log(result)ElMessage.success(result.msg?result.msg:'登录成功')
}
</script>

2.3 创建登录按钮单击事件

<el-button type="primary" class="button" @click="login">登录</el-button>

3.登录成功路由跳转

3.1 创建Layout界面

文件地址：src\views\Layout.vue

<template>Layout
</template>

3.2 设计Layout地址

文件地址：src\router\index.js

import { createRouter, createWebHistory } from 'vue-router'
import Login from '@/views/Login.vue'
import Layout from '@/views/Layout.vue'
const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',name: 'layout',component: Layout},{path: '/login',name: 'login',component: Login}],
})
export default router

3.3 其他设计路由的地址

src\main.js

src\App.vue

3.4 设计登录成功路由跳转

文件地址：src\views\Login.vue

<script setup>
import...
import { useRouter } from 'vue-router';//获得路由跳转对象
const router = useRouter()//跳转对象实例化
const login =async()=>{let result= await userLoginService(registerData.value);// console.log(result)ElMessage.success(result.msg?result.msg:'登录成功')//跳转至主页router.push("/")
}
</script>

4.Pinia状态管理

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。

官网网址：Home | Pinia 中文文档

4.1 安装

npm install pinia
npm install pinia-persistedstate-plugin

4.2 挂载

在入口文件src\main.js中

import './assets/main.css'import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { createPinia } from 'pinia'👈
import { createPersistedState } from 'pinia-persistedstate-plugin'👈const app = createApp(App)
//工具实例化
const persist = createPersistedState()👈
const pinia = createPinia()👈
pinia.use(persist)👈
app.use(pinia)👈
app.use(router)
app.use(ElementPlus)
app.mount('#app')

4.3 定义Store

使用 Pinia 进行状态管理的示例，它定义了一个名为 token 的状态管理集。

它用于管理一个名为 token 的响应式变量，这个变量通常用于存储用户的认证令牌。

定义Store：defineStore函数中有三个参数，分别为：

参数1：状态管理集的名字【唯一性】
参数2：函数，用于定义状态数据的所有内容
参数3：函数，其他配置

import { defineStore } from "pinia";
import { ref } from "vue";
export const useTokenStore = defineStore('token',()=>{//定义状态数据//1.响应式变量const token = ref('')//2.定义函数，修改token值const setToken = (newToken)=>{token.value = newToken}//3.移除token的值const removeToken = ()=>{token.value=''}return {token,setToken,removeToken}
},{persist:true//数据持久化存储
})

4.4 在组件中应用

文件地址：src\views\Login.vue

<script setup>
import...
import { useRouter } from 'vue-router';//获得路由跳转对象
import { useTokenStore } from '@/stores/token';
const tokenStore = useTokenStore()👈
const router = useRouter()//跳转对象实例化
const login =async()=>{let result= await userLoginService(registerData.value);// console.log(result)ElMessage.success(result.msg?result.msg:'登录成功')//将用户的token数据存储到pinia中tokenStore.setToken(result.data)👈//跳转至主页router.push("/")
}
</script>

4.5 配置请求携带token

当你使用这个 Axios 实例发送 HTTP 请求时，

如果 tokenStore 中存在 token，这个 token 会自动被添加到请求的 Authorization 头中。

这意味着每个请求都会自动携带认证信息，无需在每个请求中手动添加。

//添加请求拦截器
import { useTokenStore } from '@/stores/token'
instance.interceptors.request.use((config)=>{//请求前的回调//添加tokenconst tokenStore = useTokenStore();//判断有没有tokenif(tokenStore.token){config.headers.Authorization = tokenStore.token}return config;},(err)=>{//请求错误的回调Promise.reject(err)}
)