文章目录
前言
在后端开发的时候,我们的拦截器排除了注册和登录接口,针对其他接口的调用需要提供token信息才能访问,我们需要在前端中保存token的状态,而Pinia是Vue核心团队开发的,也是目前官方推荐的,这就是我们Pinia的主要原因。
一、为什么你应该使用 Pinia?
Pinia 是 Vue 的专属状态管理库,它允许你跨组件或页面共享状态。如果你熟悉组合式 API 的话,你可能会认为可以通过一行简单的 export const state = reactive({}) 来共享一个全局状态。对于单页应用来说确实可以,但如果应用在服务器端渲染,这可能会使你的应用暴露出一些安全漏洞。 而如果使用 Pinia,即使在小型单页应用中,你也可以获得如下功能:
- Devtools 支持
- 追踪 actions、mutations 的时间线
- 在组件中展示它们所用到的 Store
- 让调试更容易的 Time travel
- 热更新
- 不必重载页面即可修改 Store
- 开发时可保持当前的 State
- 插件:可通过插件扩展 Pinia 功能
- 为 JS 开发者提供适当的 TypeScript 支持以及自动补全功能。
- 支持服务端渲染
二、使用步骤
1.安装
npm install pinia
2.使用
main.js
import './assets/main.scss'
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router/router.js'
import { createPinia } from 'pinia'
const app = createApp(App)
app.use(ElementPlus)
app.use(router)
const pinia = createPinia()
app.use(pinia)
app.mount('#app')
3. 定义 Store
token.js
import { ref } from 'vue'
import { defineStore } from 'pinia'
// 你可以任意命名 `defineStore()` 的返回值,但最好使用 store 的名字,同时以 `use` 开头且以 `Store` 结尾。
// (比如 `useUserStore`,`useCartStore`,`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useTokenStore = defineStore('token', () => {
const token = ref('')
const getToken = ()=>{
return token.value
}
const setToken = (t)=>{
token.value=t
}
const removeToken = ()=>{
token.value=''
}
return { getToken, setToken, removeToken }
})
4. 设置token
登录之后,我们调用store存储token信息
Login.vue
import { useTokenStore } from '@/stores/token.js'
const loginFormRef = ref(null)
const router = useRouter()
const tokenStore=useTokenStore()
const loginUser = async () => {
let result = await loginService(registerData.value)
let message = result.message
if (result.code == 0) {
ElMessage.success(message ? message : '登录成功!')
tokenStore.setToken(result.data)
//this.$router.push('/')//选项式
router.push("/")//组合式
} else {
ElMessage.error(message ? message : '登录失败!')
}
}
三、请求拦截器
在请求发送之前,添加请求头token
import {useTokenStore} from '@/stores/token.js';
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前添加请求头token
const tokenStore=useTokenStore()
if(tokenStore.getToken()){
config.headers.Authorization='Bearer '+tokenStore.getToken()
}
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
四、状态持久化插件
1. 安装
npm install pinia-persistedstate-plugin
2. 使用
main.js
import './assets/main.scss'
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router/router.js'
import { createPinia } from 'pinia'
import {createPersistedState} from'pinia-persistedstate-plugin'
const app = createApp(App)
app.use(ElementPlus)
app.use(router)
const pinia = createPinia()
const persist = createPersistedState()
//pinia使用持久化插件
pinia.use(persist)
app.use(pinia)
app.mount('#app')
3. 状态定义参数
import { ref } from 'vue'
import { defineStore } from 'pinia'
// 你可以任意命名 `defineStore()` 的返回值,但最好使用 store 的名字,同时以 `use` 开头且以 `Store` 结尾。
// (比如 `useUserStore`,`useCartStore`,`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useTokenStore = defineStore('token', () => {
const token = ref('')
const getToken = ()=>{
return token.value
}
const setToken = (t)=>{
token.value=t
}
const removeToken = ()=>{
token.value=''
}
return { token,getToken, setToken, removeToken }
},{
persist:true
})
这里token
要涵盖在return范围内
五、未登录统一处理
//定制请求的实例
//导入axios npm install axios
import axios from 'axios';
import {useTokenStore} from '@/stores/token.js';
import { ElMessage } from 'element-plus';
import router from '@/router/router.js';
//定义一个变量,记录公共的前缀 , baseURL
const baseURL = '/api';
const instance = axios.create({baseURL})
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前添加请求头token
const tokenStore=useTokenStore()
if(tokenStore.getToken()){
config.headers.Authorization='Bearer '+tokenStore.getToken()
}
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
//添加响应拦截器
instance.interceptors.response.use(
result=>{
return result.data;
},
err=>{
if(err.response.status==401){
ElMessage.error('未登录,即将跳转到登陆界面');
router.push('/login')
}else{
ElMessage.error('服务异常')
}
return Promise.reject(err);//异步的状态转化成失败的状态
}
)
export default instance;