vue登錄成功之后的token處理詳細步驟
1、什么是Token
Token是用戶登錄成功之后服務(wù)端返回的一個身份令牌，在項目中經(jīng)常要使用。
例如：訪問需要授權(quán)的API接口、校驗頁面的訪問權(quán)限等。
同時，這里我們還需要將token數(shù)據(jù)進行存儲，這樣在訪問其它的頁面組件的時候，就可以獲取token數(shù)據(jù)來進行校驗。
2、token數(shù)據(jù)存儲在哪里呢？
第一種情況存儲在本地：
存儲到本地的問題是，數(shù)據(jù)不是響應(yīng)式的。
第二種情況存儲到vuex中：
存儲到vuex中獲取方便，并且是響應(yīng)式的。但是存儲到vuex中也會有問題，就是當我們刷新瀏覽器的時候，數(shù)據(jù)就會丟失，所以還是需要把token數(shù)據(jù)存放到本地，存儲到本地的目的就是為了進行持久化。
所以這里我們需要在登錄成功以后，把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: {
//存儲當前登錄用戶信息，包含token等數(shù)據(jù)
user: null,
},
mutations: {
setUser(state, data) {
state.user = data;
},
},
});
export default store;在上面的代碼中，創(chuàng)建了store容器，同時指定了state對象，在該對象中定義user屬性存儲登錄用戶信息。
在mutations中定義setUser方法，完成用戶信息的更新。
下面，要實現(xiàn)的就是，當?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"; //導入store
createApp(App).use(Vant).use(router).use(store).mount("#app"); //完成store的注冊操作在main.js文件中，我們導入了store,并且注冊到了Vue實例中。
第四步在登陸頁面中，把登錄信息存儲到store容器中：
import { reactive, toRefs, ref } from "vue";
import { login, sendSms } from "../../api/user";
import { Toast } from "vant";
import { useStore } from "vuex"; //導入useStore
在代碼中導入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ù)時間，默認是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中，但是當我們刷新瀏覽器的時候，Vuex中的數(shù)據(jù)還是會丟失的。所以這里，我們還需要將其存儲到本地中。
第五步將Token其存儲到本地中:
下面修改一下store/index.js文件中的代碼：
import { createStore } from "vuex";
const TOKEN_KEY = "TOUTIAO_USER";
const store = createStore({
state: {
//存儲當前登錄用戶信息，包含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中獲取，當然獲取的時候，再將其轉(zhuǎn)換成對象的形式。
4.封裝本地存儲操作
在我們的項目中，有很多的地方都需要獲取本地存儲的數(shù)據(jù)，如果每次都寫：
JSON.parse(window.localStorage.getItem(TOKEN_KEY)), window.localStorage.setItem(TOKEN_KEY, JSON.stringify(state.user));
就比較麻煩了。所以這里我們建議把操作本地數(shù)據(jù)單獨的封裝到一個模塊中。
在utils目錄下面創(chuàng)建storage.js文件，該文件中的代碼如下所示：
// 存儲數(shù)據(jù)
export const setItem = (key, value) => {
//將數(shù)組，對象類型的數(shù)據(jù)轉(zhuǎn)換為JSON格式的字符串進行存儲
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進行轉(zhuǎn)換呢，目的就是是為了方便處理，因為對字符串進行判斷看一下是否為json格式的字符串，比較麻煩一些。還需要通過正則表達式來完成。而通過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: {
//存儲當前登錄用戶信息，包含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;在上面的代碼中，我們導入getItem和setItem兩個方法，然后在存儲登錄用戶信息，和獲取登錄用戶信息的時候，直接使用這兩個方法，這樣就非常簡單了。
下面返回瀏覽器進行測試。
把以前l(fā)ocalStorage中存儲的內(nèi)容刪除掉。
然后重新輸入用戶名和密碼，發(fā)現(xiàn)對應(yīng)的localStorage中存儲了對應(yīng)的數(shù)據(jù)。
總結(jié)
到此這篇關(guān)于vue登錄成功之后的token處理詳細步驟的文章就介紹到這了,更多相關(guān)vue登錄成功token處理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細介紹了Vue的基本知識，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這篇文章主要介紹了使用Vue.js中的過濾器實現(xiàn)冪方求值的方法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
Vue文件的組織結(jié)構(gòu)不合理之優(yōu)化項目結(jié)構(gòu)詳解
在這篇博客中,我們將探討 Vue 文件組織結(jié)構(gòu)不合理的幾個常見問題,并提供解決方案,以幫助開發(fā)者創(chuàng)建更清晰、更高效的項目文件結(jié)構(gòu),希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
本文主要介紹了Vuex 命名空間 namespaced的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-03-03
這篇文章主要介紹了Vue框架里使用Swiper的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
vue使用axios實現(xiàn)excel文件下載的功能
這篇文章主要介紹了vue中使用axios實現(xiàn)excel文件下載的功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
Vue-resource實現(xiàn)ajax請求和跨域請求示例
本篇文章主要介紹了Vue-resource實現(xiàn)ajax請求和跨域請求示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要為大家詳細介紹了如何利用Vue實現(xiàn)懸浮框自由移動+錄音功能，文中的示例代碼講解詳細，感興趣的小伙伴可以動手嘗試一下2022-07-07
這篇文章主要介紹了vuex中g(shù)etters的基本用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue $refs動態(tài)拼接獲取值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01