嚴(yán)格來說，所謂利用vue3實(shí)現(xiàn)單點(diǎn)登錄，是指實(shí)現(xiàn)單點(diǎn)登錄的前端。

身份驗(yàn)證，只能是服務(wù)器端干的活。

一、原理

單點(diǎn)登錄，就是一處登錄，到處運(yùn)行。

以我現(xiàn)在做的項(xiàng)目為例，該項(xiàng)目有多個子系統(tǒng)，采用微服務(wù)架構(gòu)，各子系統(tǒng)，包括其前端，都是獨(dú)立開發(fā)，獨(dú)立部署。那么很自然，應(yīng)當(dāng)有一個公共登錄。

只需在這個公共登錄模塊中登錄，那么其他子系統(tǒng)就可以正常使用了。

具體流程

1）當(dāng)打開子系統(tǒng)時，發(fā)現(xiàn)未登錄，則轉(zhuǎn)向公共登錄，否則打開請求頁面

2）轉(zhuǎn)到公共登錄后，公共登錄檢查是否已登錄，是則附上token返回子系統(tǒng)，否則打開登錄頁面

3）公共登錄成功登錄后，附上token返回子系統(tǒng)

4）子系統(tǒng)使用過程中，登出后，需要通知公共登錄，公共登錄做相應(yīng)處置

5）前端向后端請求數(shù)據(jù)時，如果后端返回登錄無效等信息，則做登出處理

二、單點(diǎn)登錄

1、登錄

前端輸入賬號密碼等，提交到服務(wù)器端，服務(wù)器校驗(yàn)、確認(rèn)，生成token返回，登錄成功。

2、登錄狀態(tài)

前端拿到token后，保存在cookie。檢查是否已登錄，就是檢查有沒有這個cookie。

選擇cookie而不是localstorage的原因是關(guān)閉瀏覽器后，cookie即失效，而localstorage卻一直保存下來，需要額外處理，麻煩。

const TOKEN_KEY = "token";
export const isLogined = () => {
  return Cookies.get(TOKEN_KEY);
};

3、轉(zhuǎn)向公共登錄

子系統(tǒng)剛開始時沒有這個token，那么轉(zhuǎn)向公共登錄。

跳轉(zhuǎn)時，需要附上返回地址。

vue這類框架，是單頁面應(yīng)用（SPA），跳轉(zhuǎn)一般用router，但這僅限于系統(tǒng)內(nèi)部；跳到別的系統(tǒng)，我找不到有什么方法，只好祭出location.replace()。

1）子系統(tǒng)

export const toLogin = (next) => {
  const ssoUrl = loginSetup.sso;
  location.replace(ssoUrl + "?login=" + location.origin);
};

2）公共登錄模塊接收、檢查并相應(yīng)處置

//路由守衛(wèi)
router.beforeEach((to, from, next) => {
  //請求登錄
  if (to.path !== "/login" && ssoIsToLogin() === true) {
    if (isLogined()) {
      ssoReturn(location.href, next("/"));
    } else {
      next("/login");
    }
    return;
  }

  //請求退出
  if (ssoIsToLogout() === true) {
    ssoLogout();
    return;
  }

  。。。
});
export const ssoIsToLogin = () => {
  return location.href.indexOf("?login") >= 0;
};
export const ssoIsToLogout = () => {
  return location.href.indexOf("?logout") >= 0;
};
export const ssoReturn = (origin, defaultDo) => {
  const p = origin.indexOf("?login=");
  if (p >= 0) {
	//附上token返回子系統(tǒng)
    const url = origin.substr(p + 7) + "?token=" + getToken();
    location.replace(url);
  } else {
    defaultDo();
  }
};

三、單點(diǎn)登出

首先，子系統(tǒng)自己先做相應(yīng)處理，比如刪掉cookie；然后通知公共登錄模塊處置。

所謂通知，就是地址帶上參數(shù)，跳轉(zhuǎn)到公共登錄模塊。

//登出
logout(() => {
  toLogout();
});

export const logout = (callback) => {
  _beforeLogout(callback);
};
function _beforeLogout(callback) {
  //先通知后端退出，然后執(zhí)行相關(guān)操作和回調(diào)函數(shù)
  logoutApi().then(() => {
    _clearLoginInfo();//清除cookie等

    if (callback) callback();
  });
}
export const toLogout = () => {//通知登錄模塊
  const ssoUrl = loginSetup.sso;
  location.replace(ssoUrl + "?logout");
};

四、自動登錄及登出

1、自動登錄

當(dāng)子系統(tǒng)被首次打開時，比如直接在瀏覽器地址欄輸入子系統(tǒng)地址時，系統(tǒng)會先檢查登錄狀態(tài)，發(fā)現(xiàn)未登錄，則轉(zhuǎn)向登錄模塊，見上面 二.3。

2、自動登出

有2種情況，一是子系統(tǒng)主動登出，二是登錄模塊登出。

子系統(tǒng)主動登出，會先清除本身的登錄狀態(tài)，然后通知登錄模塊，執(zhí)行登錄模塊登出，如三所述；如果是登錄模塊登出，那么不會通知子系統(tǒng)。

但由于token已經(jīng)失效，只要子系統(tǒng)向服務(wù)器端請求數(shù)據(jù)，則必然收到相關(guān)信息，觸發(fā)登出處理。

總結(jié)

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論