同域名下，兩個網站通過cookie共享登入註冊功能大概思路。

阿新 • • 發佈：2021-11-04

  1 // 說明：本檔案程式碼以vue工程化專案為例，其他型別專案請自行微改!!!
  2 // 匯入js-cookie依賴
  3 import Cookies from "js-cookie";
  4 // 操作瀏覽器本地儲存
  5 const storage = window.localStorage;
  6 
  7 // 跳轉到官網登入，登入成功後會根據redirect引數，跳回之前的地址。
  8 export function gotoLogin() {
  9   if (process.env.NODE_ENV === "development") {
 10     // 開發環境,需要在本地將官網的專案執行起來 

 11     window.location.href =
 12       "http://localhost:8089/front/login/passwordlogin?redirect=" +
 13       window.location.href;
 14   } else {
 15     // 其他環境
 16     window.location.href =
 17       window.location.protocol +
 18       "//" +
 19       window.location.host +
 20       "/front/login/passwordlogin?redirect=" +
 21 
       window.location.href;
 22   }
 23 }
 24 // 跳轉到官網註冊，註冊成功後會根據redirect引數，跳回之前的地址。
 25 export function gotoRegister() {
 26   if (process.env.NODE_ENV === "development") {
 27     // 開發環境,需要在本地將官網的專案執行起來
 28     window.location.href =
 29       "http://localhost:8089/front/register/inputmsisdn?redirect=" +
 30 
       window.location.href;
 31   } else {
 32     // 其他環境
 33     window.location.href =
 34       window.location.protocol +
 35       "//" +
 36       window.location.host +
 37       "/front/register/inputmsisdn?redirect=" +
 38       window.location.href;
 39   }
 40 }
 41 // 在本專案中獲取使用者是否登入及登陸後的使用者資訊
 42 /*
 43  * 許可權相關工具函式
 44  */
 45 // ！！！！！！！！！！！！！notice
 46 export const USER_AVATAR = "ticket_avatar";
 47 export const USER_TITLENAME = "ticket_titlename";
 48 export const USER_AUTH = "is_auth";
 49 export const COOKIE_AVATAR = "avatar";
 50 export const COOKIE_NICK = "nick";
 51 export const COOKIE_STATUS = "status";
 52 export const COOKIE_PHONE = "phone";
 53 
 54 // 判斷使用者是否登入 登入返回值為true,沒登入返回值為false
 55 export function isLogin() {
 56   console.log("使用者狀態cookie:", Cookies.get("status"));
 57   if (
 58     Cookies.get("status") &&
 59     Cookies.get("status") === "0" &&
 60     Cookies.get("is_auth")
 61   ) {
 62     return true;
 63   }
 64   return false;
 65 }
 66 // 獲取使用者資訊：頭像，暱稱，手機號，是否實名等
 67 export function getBasicUserInfo() {
 68   const u = {};
 69   u.avatar = Cookies.get(COOKIE_AVATAR);
 70   u.nick = Cookies.get(COOKIE_NICK);
 71   u.showPhone = Cookies.get(COOKIE_PHONE);
 72   u.isAuth = Cookies.get(USER_AUTH);
 73   return u;
 74 }
 75 
 76 // 退出登入,呼叫介面，刪除cookie
 77 export function doLogout() {
 78   const url =
 79     window.location.protocol +
 80     "//" +
 81     window.location.host +
 82     "/passportservice/passport/logout";
 83   axios
 84     .get(url)
 85     .then((res) => {
 86       unAuth();
 87       console.log("退出登入", res);
 88       this.$router.push({
 89         name: "login",
 90       });
 91     })
 92     .catch((response) => {
 93       console.log(response);
 94     });
 95 }
 96 /*
 97  * 退出登入，刪除cookie及storage
 98  *
 99  * */
100 export function unAuth() {
101   const opt = "";
102 
103   storage.removeItem(USER_AVATAR);
104   storage.removeItem(USER_TITLENAME);
105   storage.removeItem(COOKIE_PHONE);
106   storage.removeItem(USER_AUTH);
107   Cookies.remove(COOKIE_AVATAR, opt);
108   Cookies.remove(COOKIE_NICK, opt);
109   Cookies.remove(COOKIE_STATUS, opt);
110   Cookies.remove(COOKIE_PHONE, opt);
111   Cookies.remove(USER_AUTH, opt);
112 }

 1 // 官網註冊登入頁面，獲取url中redirect引數，並在登入/註冊成功後跳轉回redirect對應的url
 2 
 3 // 1, 獲取url中redirect引數的值，儲存到瀏覽器sessionStorage中
 4 mounted() {
 5   const redirectURL = this.$route.query.redirect
 6   if (redirectURL) {
 7     window.sessionStorage.setItem('redirectUrl', redirectURL)
 8   }
 9 }
10 
11 // 2, 登入/註冊成功後，判斷sessionStorage中是否有redirectUrl，存在的話跳轉redirectUrl，不存在則跳轉到官網首頁
12 const redirectURL = window.sessionStorage.getItem("redirectUrl");
13 if (redirectURL && redirectURL.indexOf("login") === -1) {
14   window.location.href = redirectURL;
15   window.sessionStorage.removeItem("redirectUrl");
16 } else {
17   return this.$router.push("/home");
18 }