cookie實現自動登錄功能

最近在項目中使用了cookie實現自動登錄的功能，下面我將使用項目中的例子來對cookie進行簡單的分析。

功能需求是：在用戶訪問網址的時候，使用cookie對用戶的操作進行處理，使用戶的訪問得到響應。

項目背景條件：使用node+express編寫的后臺，在后臺處理登錄請求的時候，會將要保存在瀏覽器端cookie中的數據通過響應發送過去。

服務器端操作：

//設置登錄后臺路由 router.post('/login',function(req,res){const {username,password}=req.body;// const username=req.body.user.username;// const password=req.body.user.password;console.log(username,password,req.body)//根據密碼和用戶名查詢數據,filter是一個過濾器用來過濾密碼UserModel.findOne({username,password:md5(password)},filter,function(err,doc){if(doc){//正確，返回結果//生成一個cooKie，并提交給瀏覽器保存console.log('成功請求')res.cookie('userid',doc._id,{maxAge:1000*60*24*7});res.send({code:0,data:doc})//不能將密碼發送給瀏覽器}else{//失敗console.log('失敗請求')res.send({code:1,msg:'用戶名或者密碼錯誤！'})}}) })

在這里通過res.cookie將數據發送過去，這里發送的數據是userid，{maxAge:10006024*7}這個表示的是數據在瀏覽器中存在的時間，這里是一周。（就這個項目而言）為什么后臺只發送id屬性值發送過去了，因為id可以明確的標明一個數據庫中的字段，通過id屬性我們可以通過再次發送請求，獲得字段數據（數據庫使用的是MongoDB）。

客戶端操作：

現實使用情況，例如：當我們請求過一次網址（登錄過這個項目），然后了，我們×了這個網頁，這是當我們再次請求網址，我們如何處理用戶輸入的網址請求了（網址不確定，難道是讓用戶再次進入登錄界面重新的登錄過嗎？顯然這種方式不夠友好），*所以我們如何實現用戶自動登錄進之前關閉項目頁面的那個具體界面呢？或者登錄到用戶指定的具體頁面呢？

1）具體操作：先來簡單分析一下需求功能的邏輯（我們的目的是拿到數據然后渲染界面給用戶），首先如果是用戶登錄過然后×掉了網頁，然后在取請求網址，沒有關閉瀏覽器，這時瀏覽器通過上一次的請求的響應數據保存了cookie中的數據，所以用戶的id屬性值我們是可以得到的，所以可以通過渲染頁面是的生命周期函數再次發送請求獲得數據，然后渲染界面。還有一種情況就是，由于我們之前登陸項目所以redux中的state狀態機保存著當時的數據（在數據沒有消失的情況下），所以我們可以直接不用發送請求直接渲染界面給用戶。

總結一下可能情況：
1：瀏覽器cookie中沒有id值，說明用戶都沒有登錄過，所以跳轉到登錄界面，進行登錄操作；
2：瀏覽器cookie中有id值，redux中沒有數據了，所以得發送請求；
3：瀏覽器cookie中有id值，redux中有數據，所以直接拿出狀態機中的數據直接進行渲染界面即可；

代碼：

好的下面進行項目代碼的編寫，首先在react項目中引入js-cookie這個模塊，終端輸入命令 npm install --save js-cookie 下載模塊對cookie進行操作。

生命周期中發送請求，render函數中不可以發送ajax請求

componentDidMount(){//生命周期函數，由于render函數中不可以發送ajax請求，所以得在生命周期函數中來發送請求//cookie中有userid//redux中的user是一個空對象const userid = Cookies.get('userid');//得到瀏覽器cookie中的IDconst {user}=this.props;if(userid && !user._id){//發送請求的條件是，cookie中的userid有值但是redux中的user狀態對象中沒有id屬性this.props.getUser()//發送請求}} //實現客戶端只有登錄//客戶端請求頁面路徑的時候，瀏覽器就可以獲得你的請求路徑const pathname=this.props.location.pathname;//判斷客戶是否登錄過（使用Cookie得到id）const userid=Cookies.get('userid');if(!userid){//如果沒有值，直接跳轉到登錄界面return <Redirect to='/login'/>}//cookie中有userid//redux中的user是否有數據，如果有的話就不需要在發送請求const {user}=this.props;if(!user._id){//沒有值，這里不做處理，交給生命周期函數再去發送函數return null}else{//如果請求的是根路徑，通過路徑拼接函數，然后在跳轉到對應的界面if(pathname==='/'){const path=getRedirectPath(user.type,user.header);return <Redirect to={path}/>}}

請求路徑拼接函數

//封裝一些工具函數（公用的一些方法） export function getRedirectPath(type,header){let path=''path += type==='laoban'?'/laoban':'/dashen';if(!header){path +='info'}return path; }

通過以上代碼，借助cookie就實現用戶自動登錄的需求。

總結一下自己在編寫這個功能的時候的感受和想法：
我自己第一次了解這個cookie實現自動登錄也沒聽懂，然后聽了兩遍才基本明白了其中的邏輯，第一次聽了難住我的主要是redux中的數據存在與否，還有一點就是后臺的數據的獲得（原來通過id屬性就可以得到整個用戶的所有在項目中的信息，所以在設計MongoDB集合的時候還是蠻不錯的），還有一點感受就是，編寫代碼得認真，有時候寫錯一個字符或者多打了一個括號，這都會使項目失敗，而且有時候這一些錯誤，編譯器他還不報錯（服了），最后測試項目真的蠻重要的，功能遇到的問題，我都花了好久才測試出來在哪里出錯了（太菜了），哈哈。所以編寫代碼得細致，寫了一部分就運行一下看看效果。對于項目邏輯這一塊，我現在感覺只要自己真的用心分析，一般的這種邏輯都不怎么難。所以，做一個用心，細致的程序員。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的react招聘项目——使用cookie实现项目自动登录功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。