當前位置:首頁 » 網頁前端 » 前端實現永久登錄
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端實現永久登錄

發布時間: 2023-05-03 06:38:35

前端JS 怎麼實現用戶登陸之後點各個頁面都不用再登陸

給你說個思路吧!
登錄成功之後,把登錄信息加密後保存在cookie裡面;
然後建一個js文件,在這個文件裡面做用戶是否已登錄的判斷!如果登錄了就直接顯示該頁面,如果沒登錄,就跳轉回登錄頁面!
這個js文件在登錄後才能看到的頁面都做引用;

❷ 前端簡訊驗證碼登錄可以自動登錄嗎

前端簡訊驗證碼登錄可以自動登錄。方法如下:
1、前端登錄頁面手機號驗證碼登錄頁面。按鈕樣式都是自己寫的class,按鈕實際上是用的div+a標簽來實現的,添加了動態的樣式。
2、前端獲取驗證碼的函數。先進行手機號的判空處理,為空則提示用戶不能為空,再使用正則表達式對手機號碼進行限制。
3、後端獲取驗證碼代碼。從平台上獲取相關參數,填入。調用它們平台提供的發送簡訊驗證碼的介面函數,查看是否發送成功,發送成功則將該phoneNum-verifyCode用鍵值對的形式存到redis資料庫,有效時間為5分鍾,5分鍾之後自動過期,提示用戶需要在5分鍾之內填寫完畢並登錄。
4、注冊功能前後端的實現。多幾個判空條件(如名字、密碼不能為空,用戶是否存在,手機號是否已被注冊,用戶名是否已被注冊),實現的流程相似,先通過手機獲取驗證碼,將發送成功的驗證碼存到redis資料庫,有效時間為5分鍾,然後用戶填寫驗證碼,前端向後端發送請求,後端驗證是否正確,正確則返回注冊成功。

❸ js,網頁設計,cookie,jsp....js記住用戶的登錄信息,跳轉二級頁面時不需要再次登陸了,是怎麼做到的

還是cookie 、session 、。
你可以試一下。登錄到淘寶之後是登錄狀態,然後你清空本地cookie,再刷新一乎咐下,就是未登錄狀態。
至於答頃敬失效時間,也是存放在session、或cookie里。當失效時間小於清慎等於當前時間,即自動退出登錄

❹ 前端登陸實現

四種方式

Cookie 出現的原因: HTTP 協議是無狀態的,每次請求都會建立一個新的鏈接,請求結束就會斷開鏈接,優點就是可以節省鏈接資源,缺點就是無法保存用戶狀態。Cookie 的出現就是為了解決這個問題。

Cookie 是存儲在瀏覽器中的,可以通過 Js 和 set-cookie 這個響應欄位來進行設置。

cookie 的限制:

有了 cookie 之後,服務端就可以從客戶端獲取到信息,如果需要對信息進行驗證,那麼還需要 session

服務端在收到客戶端的請求之後,會在伺服器中開辟一片內存空間來存放 session

第一次登陸之後,下次再訪問的時候就會攜帶這個 cookie,服務端就可以根據 sessionId 進行驗證用戶是否登陸(判斷這個 sessionId 和服務端保存的 sessionId 是否一致,是否有這個 sessionId 的記錄或者記錄是否有效)

客戶端瀏覽器訪問伺服器的時候,伺服器把客戶端信息以某種形式記錄在伺服器上。這就是 Session。客戶端瀏覽器再次訪問時只需要從該 Session 中查找該客戶的狀態就可以了。

Token 是 伺服器 生成的一個字元串,作為客戶端請求的一個令牌。第一次登陸之後,伺服器會生成一個 Token 返回給客戶端,客戶端後續訪問的時候,只需帶上這個 Token 進行身份認證

缺點

JWT(Json Web Token)

服務端不需要存儲 Token 那麼服務端是怎麼驗證客戶端傳遞過來的 Token 是否有效的呢?

答案:

Token 並不是雜亂無章的字元串,而是通過多種演算法拼接而成的字元串

header 部分指定了這個 Token 所使用的簽名演算法

payload 部分表明了這個 JWT 的意圖

signature 部分為 JWT 的簽名,主要是為了讓 JWT 不被隨意的篡改

簽名的部分有兩個步驟

一:

二:

最後的 Token 計算如下:

單點登陸指的是公司會搭建一個公共的認證中心,公司里的所有產品的認證都可以在這個認證中心中完成,一個產品在認證中心認證之後,再去訪問其他產品時就不需要再次認證

這個時候,由於 a.com 存在已登錄的 Cookie 信息,所以伺服器端直接認證成功。

這個時候由於認證中心存在之前登陸過的 cookie,所以不需要再輸入賬號密碼,直接從第四步開始執行

目前我們已經完成了單點登錄,在同一套認證中心的管理下,多個產品可以共享登錄態。現在我們需要考慮退出了,即:在一個產品中退出了登錄,怎麼讓其他的產品也都退出登錄?

原理也不難,其實就是在攜帶 ticket 去請求認證中心的時候,再去請求一下認證中心的退出登陸的 api 即可

當某個產品 c.com 退出登陸時

sso 就是一個集中地驗證系統。你項目內請求時,向 sso 發一個請求,他給你個 token 你扔到游覽器緩存里,請求的時候放在請求頭里帶著。和其他驗證介面一樣。 他好就好在,一個賬號在不同系統里都可以登錄,因為不同項目可以共用這個 token。並且通過 sso 集中管理一些用戶信息,你可以方便的拿用戶信息。

以微信為例子

❺ 可以用html5或者JavaScript自動登錄網站嗎

由於存在跨域限制,想用前端腳本來實現自動登錄網站基本上是不可能的,除非這個要登錄的網站伺服器是你自己的,通過設置解除跨域限制。
要想實現跨域訪問公共網站,有如下方法:
通過後台腳本訪問,然後再把訪問結果返回給瀏覽器。也就是說自己要有一個網頁伺服器,然後寫一個程序(比如php的)來訪問別人家的網站(這個是沒有跨域限制的)
電腦程序或手機App內的瀏覽器控制項是允許跨域訪問遠程網站的
還有一種方法是利用hta(微軟的網頁應用程序)方式

❻ 前後端分離的項目如何實現登錄狀態的保持。

前後端分離的項目一般會使用token實現登錄狀態的保持。
token其實就是一個隨機字元串,當用戶在登錄頁面輸入賬號和密碼後,前端將賬號密碼發送給後端,後端檢驗完賬號和密碼後,會生成一個隨機不重復的字元串即(token),並將其響應給前端,前端拿到token後,需要在客戶端進行持久化存儲(一般會寫在localStorage或者sessionStorage中,如果是SPA會存儲在sessionStorage中,如果是MPA則存儲在localStorage中),那麼下次在向後端數據介面發送請求的時候,一般需要將token一並發送給後端數據介面,後端數據介面會對token進行校驗,如果合法則正常響應請求,如果不合法,則提示未登錄。
前端則根據本地存儲中是否存在token判斷用戶是否處於登錄狀態。

❼ 11 | 登錄前端實現

前端任務點,編寫登錄請求函數,和 用戶注冊 類似,前端拿到用戶名和密碼發起 POST 請求。

收到 token 如何持久化存儲,如何讓每次請求都攜帶 token 是這里的點。

用戶登錄的介面詳情可以點 這里 。

這里有可以優化的點,未來可能需要添加驗證碼等附加信息,這個時候就需要添加函數參數,就會比較麻煩,可以將參數數據格式包裝成一個對象。當然,這里還是使用第一種方法了。

這不是重點,重點是登錄成功後,我們要做的事情。

按照介面約定,登錄成功我們可以得到如下信息:

這里我們要用到 token 欄位,是我們現在有 token 了,但一刷新就沒了,所以我們要做一下持久化存儲,你想存哪裡就存哪裡,只要你能找到。這里就存儲 localStorage 中了,在 Chorme86 中你甚至可以存到一個本地的文本文件中,只不過讀取速度比較慢罷了。

除了 token,我們還要將用戶信息存下來,比如首頁展示用的用戶頭像等信息。

關於本地信息的安全性問題,本地保存的用戶信息並不作為數據請求的憑證,僅供展示使用,當用戶更改本地的用戶信息對於登錄的狀態不會有影響,因為後端的判斷依據是 token,token 有效就登錄成功,而不是說本地存儲的用戶信息是誰服務端就認為你是誰,前端是不可信的。這種登錄方式的危險點在於用戶 token 被盜,但這很難避免,最不安全的是人。。。

登錄成功,返回首頁,用戶名或者是用戶頭像並沒有同步更新,這是因為,這里是單頁應用,你在 login 頁面將登錄用戶信息存到 localStorage 中,然後跳轉到了首頁,此時頁面沒有刷新,而 localStorage 中的信息沒有及時更新到 DOM 中,此時的用戶信息還是你沒有進入 login 頁面的用戶信息,自然是無法展示的,怎麼解決呢?很簡單,刷新一下。

當頁面刷新時,用戶信息會從 localStorage 中讀取,顯示的就是現在的登錄用戶了,但。。。

我不想刷新。

也很簡單,搞成響應式數據就好了呀。來人呀,上Vuex。

當你將 token 存在 cookie 中,前端並不需要主動設置,默認就攜帶傳給了服務端,而這里我們存到 Authorization 中,就需要我們設置一下,攔截請求,在請求發送前添加 token。

好的,來捋一捋流程。

用戶訪問 /login,被前端路由處理,指向Login.vue,用戶看到登錄框,填入自己的賬號,當用戶填寫賬號時,name password被實時監聽,同時會對登錄按鈕的可操作產生影響,只有當用戶將賬密輸入完整時,登錄按鈕可用。

前端收集用戶信息,調用 network 中封裝的 longin 請求函數,該請求發送前被攔截,添加 token,可能為空,使用賬密登錄時,token沒實際效用。

後端檢查成功給響應,前端將響應中數據的 token 通過觸發 mutations 更新 Vuex 中 state,同時,將該 token 存到 localStorage,以免用戶關掉頁面導致 token 丟失。

登錄成功跳到應用首頁,用戶頭像等信息通過 Vuex 獲取,因為 Vuex 中的數據是響應式的,此時從 login 跳轉到首頁,用戶頭像等信息也會得到相應的更新。

當用戶新增文章時,只需向伺服器傳文章數據就可以了,而對於文章作者的相關信息則由後端從請求頭中的 token 解析得到,這里需要注意,前端不要將本地的用戶信息作為准確的作者信息,對於用戶可以偽造的信息要做最小化的信任,用戶完全有能力將本地用戶名從張三改為李四,而最終作者是那個則需要由用戶提供的 token 來判定,雖說 token 也有可能被偽造,但難度相對較大,往往是被竊取的可能性更大。

無密碼登錄其實還是需要「密碼」的,只不過是換了一個臨時性的對人不可讀的字元串來代替罷了,並且每次請求幫你填好了。

在不考慮安全性的情況下本質上其實就是你將密碼存到了瀏覽器里,然後你每次訪問網站時讓瀏覽器幫你輸入用戶名和密碼,這個過程你是無感知的,這樣自己就不用像個憨憨一樣每次刷新就要填一遍表單。

填表是一件非常無聊的事。

要學一波 TypeScript 了呀。

❽ 前端怎麼實現登錄和注冊

登錄注冊設計到數據儲存和讀取,需要後端代碼的支持下才能前端

❾ 旅館業前端採集系統怎麼永久保存登陸賬號密碼

在登錄的表單中添加記住密碼勾選框即可。前端採集系統:前端通過連接攝像頭、各類感測器,對產污設備、排污設備、排污口、周邊大氣等環境進行監控,實時監測流速、流量、PH值、COD、氨氮、硝氮、亞硝氮、總磷等數據進行實時的監測,保障數據獲取的准確性。旅館業前端採集系統在登錄的表單中添加記住密碼勾選框即可保存登陸賬號密碼。前端採集系統前端採集系統是指系統前端採集音視頻信息的設備。