vue登錄成功之后的token處理詳細(xì)步驟
1、什么是Token
Token是用戶登錄成功之后服務(wù)端返回的一個身份令牌，在項目中經(jīng)常要使用。
例如：訪問需要授權(quán)的API接口、校驗頁面的訪問權(quán)限等。
同時，這里我們還需要將token數(shù)據(jù)進(jìn)行存儲，這樣在訪問其它的頁面組件的時候，就可以獲取token數(shù)據(jù)來進(jìn)行校驗。
2、token數(shù)據(jù)存儲在哪里呢？
第一種情況存儲在本地：
存儲到本地的問題是，數(shù)據(jù)不是響應(yīng)式的。
第二種情況存儲到vuex中：
存儲到vuex中獲取方便，并且是響應(yīng)式的。但是存儲到vuex中也會有問題，就是當(dāng)我們刷新瀏覽器的時候，數(shù)據(jù)就會丟失，所以還是需要把token數(shù)據(jù)存放到本地，存儲到本地的目的就是為了進(jìn)行持久化。
所以這里我們需要在登錄成功以后，把token數(shù)據(jù)存儲到vuex中，這樣可以實現(xiàn)響應(yīng)式，在本地存儲就是為了解決持久化的問題。
3.配置vuex
第一步安裝最新版本的Vuex：
npm install vuex@next --save
第二步在src目錄下面創(chuàng)建store目錄，在store目錄中index.js文件，該文件中的代碼如下所示：
import { createStore } from "vuex";
const store = createStore({
state: {
//存儲當(dāng)前登錄用戶信息，包含token等數(shù)據(jù)
user: null,
},
mutations: {
setUser(state, data) {
state.user = data;
},
},
});
export default store;在上面的代碼中，創(chuàng)建了store容器，同時指定了state對象，在該對象中定義user屬性存儲登錄用戶信息。
在mutations中定義setUser方法，完成用戶信息的更新。
下面，要實現(xiàn)的就是，當(dāng)?shù)卿洺晒σ院?，更新user這個狀態(tài)屬性。
第三步把store注入到Vue的實例中：
import { createApp } from "vue";
import App from "./App.vue";
import Vant from "vant";
import "vant/lib/index.css";
import "amfe-flexible";
import "./styles/index.css";
import router from "./router";
import store from "./store"; //導(dǎo)入store
createApp(App).use(Vant).use(router).use(store).mount("#app"); //完成store的注冊操作在main.js文件中，我們導(dǎo)入了store,并且注冊到了Vue實例中。
第四步在登陸頁面中，把登錄信息存儲到store容器中：
import { reactive, toRefs, ref } from "vue";
import { login, sendSms } from "../../api/user";
import { Toast } from "vant";
import { useStore } from "vuex"; //導(dǎo)入useStore
在代碼中導(dǎo)入useStore。
export default {
setup() {
const loginForm = ref();
//獲取store
const store = useStore();
在setup函數(shù)中，調(diào)用useStore方法，獲取store容器。
return {
...toRefs(user),
...useSubmit(user, store),//在調(diào)用useSubmit方法的時候傳遞store容器
userFormRules,
loginForm,
};
//用戶登錄
function useSubmit(user, store) {
const onSubmit = async () => {
//1、獲取表單數(shù)據(jù)
//2、表單驗證
//3、提交表單請求
Toast.loading({
message: "登錄中...",
forbidClick: true, //禁用背景點擊
duration: 0, //持續(xù)時間，默認(rèn)是2000毫秒，如果為0則持續(xù)展示
});
const res = await login(user);
if (res.data.code === 0) {
store.commit("setUser", res.data);
Toast.success("用戶登錄成功");
} else {
Toast.fail("用戶名或密碼錯誤");
}
//4、根據(jù)請求響應(yīng)結(jié)果處理后續(xù)操作。
};
return {
onSubmit,
};
}
登錄成功以后，獲取到返回的數(shù)據(jù)，同時調(diào)用store中的commit方法完成數(shù)據(jù)的保存
我們雖然把登錄成功的數(shù)據(jù)，存儲到Vuex中，但是當(dāng)我們刷新瀏覽器的時候，Vuex中的數(shù)據(jù)還是會丟失的。所以這里，我們還需要將其存儲到本地中。
第五步將Token其存儲到本地中:
下面修改一下store/index.js文件中的代碼：
import { createStore } from "vuex";
const TOKEN_KEY = "TOUTIAO_USER";
const store = createStore({
state: {
//存儲當(dāng)前登錄用戶信息，包含token等數(shù)據(jù)
// user: null,
user: JSON.parse(window.localStorage.getItem(TOKEN_KEY)),
},
mutations: {
setUser(state, data) {
state.user = data;
window.localStorage.setItem(TOKEN_KEY, JSON.stringify(state.user));
},
},
});
export default store;
在mutations中的setUser方法中，將登錄成功的用戶數(shù)據(jù)存儲到了localStorage中，在存儲的時候，將數(shù)據(jù)轉(zhuǎn)成了字符串。
同時在state中獲取數(shù)據(jù)的時候，就從localStorage中獲取，當(dāng)然獲取的時候，再將其轉(zhuǎn)換成對象的形式。
4.封裝本地存儲操作
在我們的項目中，有很多的地方都需要獲取本地存儲的數(shù)據(jù)，如果每次都寫：
JSON.parse(window.localStorage.getItem(TOKEN_KEY)), window.localStorage.setItem(TOKEN_KEY, JSON.stringify(state.user));
就比較麻煩了。所以這里我們建議把操作本地數(shù)據(jù)單獨(dú)的封裝到一個模塊中。
在utils目錄下面創(chuàng)建storage.js文件，該文件中的代碼如下所示：
// 存儲數(shù)據(jù)
export const setItem = (key, value) => {
//將數(shù)組，對象類型的數(shù)據(jù)轉(zhuǎn)換為JSON格式的字符串進(jìn)行存儲
if (typeof value === "object") {
value = JSON.stringify(value);
}
window.localStorage.setItem(key, value);
};
//獲取數(shù)據(jù)
export const getItem = (key) => {
const data = window.localStorage.getItem(key);
//這里使用try..catch的，而不是通過if判斷一下是否為json格式的字符串，然后在通過parse進(jìn)行轉(zhuǎn)換呢，目的就是是為了方便處理，因為對字符串進(jìn)行判斷看一下是否為json格式的字符串，比較麻煩一些。還需要通過正則表達(dá)式來完成。而通過try..catch比較方便
// 如果data不是一個有效的json格式字符串，JSON.parse就會出錯。
try {
return JSON.parse(data);
} catch (e) {
return data;
}
};
//刪除數(shù)據(jù)
export const removeItem = (key) => {
window.localStorage.removeItem(key);
下面返回到store/index.js文件中，修改對應(yīng)的代碼，這里使用我們上面封裝好的代碼。
import { createStore } from "vuex";
import { getItem, setItem } from "../utils/storage";
const TOKEN_KEY = "TOUTIAO_USER";
const store = createStore({
state: {
//存儲當(dāng)前登錄用戶信息，包含token等數(shù)據(jù)
// user: null,
// user: JSON.parse(window.localStorage.getItem(TOKEN_KEY)),
user: getItem(TOKEN_KEY),
},
mutations: {
setUser(state, data) {
state.user = data;
setItem(TOKEN_KEY, state.user);
// window.localStorage.setItem(TOKEN_KEY, JSON.stringify(state.user));
},
},
});
export default store;在上面的代碼中，我們導(dǎo)入getItem和setItem兩個方法，然后在存儲登錄用戶信息，和獲取登錄用戶信息的時候，直接使用這兩個方法，這樣就非常簡單了。
下面返回瀏覽器進(jìn)行測試。
把以前l(fā)ocalStorage中存儲的內(nèi)容刪除掉。
然后重新輸入用戶名和密碼，發(fā)現(xiàn)對應(yīng)的localStorage中存儲了對應(yīng)的數(shù)據(jù)。
總結(jié)
到此這篇關(guān)于vue登錄成功之后的token處理詳細(xì)步驟的文章就介紹到這了,更多相關(guān)vue登錄成功token處理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue使用Element組件時v-for循環(huán)里的表單項驗證方法
這篇文章主要介紹了vue使用Element組件時v-for循環(huán)里的表單項驗證方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
Vue+Vite項目初建(axios+Unocss+iconify)的實現(xiàn)
一個好的項目開始搭建總是需要配置許多初始化配置,本文就來介紹一下Vue+Vite項目初建(axios+Unocss+iconify)的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2024-02-02
最近做了一個手機(jī)端系統(tǒng)，其中遇到了父頁面需要攜帶參數(shù)跳轉(zhuǎn)至子頁面的問題，現(xiàn)已解決，下面分享一下實現(xiàn)過程，感興趣的朋友一起看看吧2021-04-04
這篇文章主要為大家介紹了vue?LogicFlow更多配置選項詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要介紹了vue組件style中scoped的作用及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-09-09
element table跨分頁多選及回顯的實現(xiàn)示例
本文主要介紹了element table跨分頁多選及回顯的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要介紹了vue全局環(huán)境變量和模式的相關(guān)知識，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
當(dāng)市面上主流的組件庫不能滿足我們業(yè)務(wù)需求的時候,那么我們就有必要開發(fā)一套屬于自己團(tuán)隊的組件庫,下面這篇文章主要給大家介紹了一個基于vue3+ts+vite項目搭建的相關(guān)資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了關(guān)于VueRouter導(dǎo)入的全過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
本篇文章主要介紹了利用VUE框架，實現(xiàn)列表分頁功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-01-01