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