這兩天老是有兄弟問到Vue的登陸和注冊(cè)，登陸成功留在首頁(yè)，沒有登錄回到登錄頁(yè)面，現(xiàn)在我用最簡(jiǎn)單實(shí)用的

paraller 發(fā)布于2019-08-02 11:17 / 2158人閱讀

摘要：其實(shí)登錄注冊(cè)，并且登錄一次保持登錄的狀態(tài)，是每個(gè)項(xiàng)目都需要實(shí)現(xiàn)的功能。

其實(shí)登錄注冊(cè)，并且登錄一次保持登錄的狀態(tài)，是每個(gè)項(xiàng)目都需要實(shí)現(xiàn)的功能。網(wǎng)上也有很多的方法，不過，不是通俗易懂，在這里說一下我自己的方法，非常簡(jiǎn)單實(shí)用
核心就是用localStorage存、取數(shù)據(jù)，這樣當(dāng)刷新瀏覽器，或者關(guān)閉在打開的時(shí)候能達(dá)到預(yù)期想要的效果

在router/index.js中

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:"首頁(yè)",component:resolve =>{require(["@/components/home"],resolve)}}
    ]
})

其中redirect（默認(rèn)跳轉(zhuǎn)）可以直接寫在home頁(yè)面，剛進(jìn)入頁(yè)面直接跳轉(zhuǎn)首頁(yè)

然后我們在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("登錄過了");//登錄成功了，保留在登錄頁(yè)面   
            }else{
                console.log("沒有登錄");
                this.$router.push("/login");//沒有登錄過 返回登錄頁(yè)面
            }
          },

然后我們在login.vue 當(dāng)用戶請(qǐng)求數(shù)據(jù)成功的時(shí)候把Login的狀態(tài)寫入

      axios.post("后臺(tái)接口",qs.stringify({
                      username:"用戶名",
                     password: "密碼"
                        }),{
            headers: {//請(qǐng)求頭
                "Content-Type": "application/x-www-form-urlencoded",
                "Accept":"application/json"
                }
            }).then((response) => {//成功回調(diào)
                if(response.data.status=="200"){//狀態(tài)正常的時(shí)候
                      this.$router.push("/home");
         //存儲(chǔ)名字為L(zhǎng)ogin值為true的變量,方便我們?cè)趆ome頁(yè)面判斷是否登錄
                      localStorage.setItem("Login",true)
              }
                    }, (error) => {
                        console.log(error);
                    });

如果首頁(yè)有退出登錄按鈕，那退出的時(shí)候執(zhí)行

         out(){
                  localStorage.removeItem("Login");//刪掉我們存的變量就可以了
                  this.$router.push("/login");//點(diǎn)擊退成功按鈕返回登錄頁(yè)面
              }

這樣就實(shí)現(xiàn)了Vue的登陸和注冊(cè)，用戶刷新瀏覽器，或者關(guān)閉在打開都保持登錄狀態(tài)

怎么樣是不是很簡(jiǎn)單呢？