這兩天總是有兄弟問到Vue的登錄和註冊，登錄成功留在首頁，沒有登陸回到登陸頁面，如今我用最簡單實用的方法實現（兩分鐘技就看懂）

其實登陸註冊，而且登陸一次保持登陸的狀態，是每一個項目都須要實現的功能。 網上也有不少的方法，不過，不是通俗易懂，在這裏說一下我本身的方法，很是簡單實用
核心就是用localStorage存、取數據，這樣當刷新瀏覽器，或者關閉在打開的時候能達到預期想要的效果

---

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

其中redirect（默認跳轉）能夠直接寫在home頁面，剛進入頁面直接跳轉首頁

而後咱們在home.vue的 周期函數created裏面作判斷 Login的值狀態（Login是在login.vue中localStorage存入的變量，如今咱們先讀取）

created() {
            console.log(localStorage.getItem("Login"));
            if(localStorage.getItem("Login")){
                console.log("登陸過了");//登陸成功了，保留在登陸頁面   
            }else{
                console.log("沒有登陸");
                this.$router.push("/login");//沒有登陸過 返回登陸頁面
            }
          },

而後咱們在login.vue 當用戶請求數據成功的時候把Login的狀態寫入

axios.post("後臺接口",qs.stringify({
                      username:"用戶名",
                     password: "密碼"
                        }),{
            headers: {//請求頭
                "Content-Type": "application/x-www-form-urlencoded",
                "Accept":"application/json"
                }
            }).then((response) => {//成功回調
                if(response.data.status=="200"){//狀態正常的時候
                      this.$router.push("/home");
         //存儲名字爲Login值爲true的變量,方便咱們在home頁面判斷是否登陸
                      localStorage.setItem("Login",true)
              }
                    }, (error) => {
                        console.log(error);
                    });

若是首頁有退出登陸按鈕，那退出的時候執行

out(){
                  localStorage.removeItem("Login");//刪掉咱們存的變量就能夠了
                  this.$router.push("/login");//點擊退成功按鈕返回登陸頁面
              }

這樣就實現了Vue的登錄和註冊，用戶刷新瀏覽器，或者關閉在打開都保持登陸狀態

怎麼樣是否是很簡單呢？