資訊專欄INFORMATION COLUMN
摘要：其實登錄注冊，并且登錄一次保持登錄的狀態(tài)，是每個項目都需要實現(xiàn)的功能。
其實登錄注冊，并且登錄一次保持登錄的狀態(tài)，是每個項目都需要實現(xiàn)的功能。 網(wǎng)上也有很多的方法，不過，不是通俗易懂，在這里說一下我自己的方法，非常簡單實用
核心就是用localStorage存、取數(shù)據(jù)，這樣當刷新瀏覽器，或者關(guān)閉在打開的時候能達到預(yù)期想要的效果
import Vue from "vue"
import Router from "vue-router"
Vue.use(Router)
export default new Router({
routes: [
{path:"/", redirect:"/home"},
{path:"/login",name:"登錄",component:resolve =>{require(["@/components/login"],resolve)}},
{path:"/home",name:"首頁",component:resolve =>{require(["@/components/home"],resolve)}}
]
})
其中redirect（默認跳轉(zhuǎn)）可以直接寫在home頁面，剛進入頁面直接跳轉(zhuǎn)首頁
然后我們在home.vue的 周期函數(shù)created里面做判斷 Login的值狀態(tài)（Login是在login.vue中l(wèi)ocalStorage存入的變量，現(xiàn)在我們先讀取）
created() {
console.log(localStorage.getItem("Login"));
if(localStorage.getItem("Login")){
console.log("登錄過了");//登錄成功了，保留在登錄頁面
}else{
console.log("沒有登錄");
this.$router.push("/login");//沒有登錄過 返回登錄頁面
}
},
然后我們在login.vue 當用戶請求數(shù)據(jù)成功的時候把Login的狀態(tài)寫入
axios.post("后臺接口",qs.stringify({
username:"用戶名",
password: "密碼"
}),{
headers: {//請求頭
"Content-Type": "application/x-www-form-urlencoded",
"Accept":"application/json"
}
}).then((response) => {//成功回調(diào)
if(response.data.status=="200"){//狀態(tài)正常的時候
this.$router.push("/home");
//存儲名字為Login值為true的變量,方便我們在home頁面判斷是否登錄
localStorage.setItem("Login",true)
}
}, (error) => {
console.log(error);
});
如果首頁有退出登錄按鈕，那退出的時候執(zhí)行
out(){
localStorage.removeItem("Login");//刪掉我們存的變量就可以了
this.$router.push("/login");//點擊退成功按鈕返回登錄頁面
}
這樣就實現(xiàn)了Vue的登陸和注冊，用戶刷新瀏覽器，或者關(guān)閉在打開都保持登錄狀態(tài)
怎么樣是不是很簡單呢？
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108289.html
摘要：其實登錄注冊，并且登錄一次保持登錄的狀態(tài)，是每個項目都需要實現(xiàn)的功能。 其實登錄注冊，并且登錄一次保持登錄的狀態(tài)，是每個項目都需要實現(xiàn)的功能。 網(wǎng)上也有很多的方法，不過，不是通俗易懂，在這里說一下我自己的方法，非常簡單實用核心就是用localStorage存、取數(shù)據(jù)，這樣當刷新瀏覽器，或者關(guān)閉在打開的時候能達到預(yù)期想要的效果 在router/index.js中 import Vue ...
摘要：用存儲用戶路由守衛(wèi)路由中設(shè)置的字段就在當中每次跳轉(zhuǎn)的路徑登錄狀態(tài)下訪問頁面會跳到如果沒有訪問任何頁面。一個簡單的保存登錄狀態(tài)的小。 Vue項目中實現(xiàn)用戶登錄及token驗證 先說一下我的實現(xiàn)步驟： 使用easy-mock新建登錄接口，模擬用戶數(shù)據(jù) 使用axios請求登錄接口，匹配賬號和密碼 賬號密碼驗證后， 拿到token，將token存儲到sessionStorage中，并跳轉(zhuǎn)到首...
摘要：昨天研究了網(wǎng)站的注冊流程，感興趣的可以看下從前后端分別學(xué)習(xí)注冊登錄流程今天接著研究注冊登錄流程之登錄。為解決這個問題，引入，它是由一組隨機數(shù)組合的哈希表，當用戶登錄成功，本來發(fā)放給用戶，現(xiàn)在變成發(fā)放給用戶。 昨天研究了網(wǎng)站的注冊流程，感興趣的可以看下：從前后端分別學(xué)習(xí)——注冊/登錄流程1 今天接著研究注冊/登錄流程之登錄。 登錄 首先來看一下登陸過程：showImg(https://s...
閱讀 824·2021-11-22 15:25
閱讀 1432·2021-09-08 09:45
閱讀 1723·2021-09-02 09:46
閱讀 1316·2019-08-30 15:56
閱讀 1543·2019-08-29 15:14
閱讀 1173·2019-08-29 13:06
閱讀 2023·2019-08-29 12:34
閱讀 1415·2019-08-26 12:14
