欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue登錄成功之后的token處理詳細(xì)步驟

 更新時間：2024年10月02日 11:10:08   作者：@gymm  
Token是身份驗(yàn)證后服務(wù)端返回的令牌,常用于訪問授權(quán)API和頁面權(quán)限校驗(yàn),Token數(shù)據(jù)可存儲在本地或Vuex中,本地存儲可實(shí)現(xiàn)數(shù)據(jù)持久化,這篇文章主要介紹了vue登錄成功之后的token處理詳細(xì)步驟,需要的朋友可以參考下

1、什么是Token

Token是用戶登錄成功之后服務(wù)端返回的一個身份令牌，在項(xiàng)目中經(jīng)常要使用。

例如：訪問需要授權(quán)的API接口、校驗(yàn)頁面的訪問權(quán)限等。

同時，這里我們還需要將token數(shù)據(jù)進(jìn)行存儲，這樣在訪問其它的頁面組件的時候，就可以獲取token數(shù)據(jù)來進(jìn)行校驗(yà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中，這樣可以實(shí)現(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方法，完成用戶信息的更新。

下面，要實(shí)現(xiàn)的就是，當(dāng)?shù)卿洺晒σ院?，更新user這個狀態(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的注冊操作

在main.js文件中，我們導(dǎo)入了store,并且注冊到了Vue實(shí)例中。

第四步在登陸頁面中，把登錄信息存儲到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、表單驗(yàn)證
    //3、提交表單請求
    Toast.loading({
      message: "登錄中...",
      forbidClick: true, //禁用背景點(diǎn)擊
      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.封裝本地存儲操作

在我們的項(xiàng)目中，有很多的地方都需要獲取本地存儲的數(shù)據(jù)，如果每次都寫：

JSON.parse(window.localStorage.getItem(TOKEN_KEY)),
window.localStorage.setItem(TOKEN_KEY, JSON.stringify(state.user));

就比較麻煩了。所以這里我們建議把操作本地?cái)?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)換呢，目的就是是為了方便處理，因?yàn)閷ψ址M(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)文章

最新評論