Vue登陸註冊，並保持登陸狀態

關於vue登陸註冊，並保持登陸狀態，是vue玩家必經之路，網上也有不少的解決方法，可是有一些太過於複雜，新手可能會看的一臉懵逼，如今給你們介紹一種我本身寫項目在用並且並不難理解的一種方法。

項目中有一些路由是須要登陸才能夠進入的，好比首頁，我的中心等等
有一些路由是不須要登陸就能夠進入，好比登陸頁，註冊頁，忘記密碼等等
那如何判斷路由是否須要登陸呢？就要在路由JS裏面作文章

在router.js中添加meta區分

好比登陸註冊頁面，不須要登陸便可進入，那麼咱們把meta中的isLogin標誌設置爲false

{
  //登陸
  path: '/login',
  component: login,
  meta: {
    isLogin: false
  }
},
{
  //註冊
  path: '/register',
  component: register,
  meta: {
    isLogin: false
  }
},

而在首頁咱們須要登陸才能進入，那麼咱們把meta中的isLogin標誌設置爲true

{
  //首頁
  path: '/home',
  component: home,
  meta: {
    isLogin: true
  },
}

這樣咱們就爲進入各個路由是否須要登陸作了區分。

接下來咱們在login.vue中修改登陸後狀態

咱們使用axios向後臺發起登陸請求

this.$axios.post("/xxx/login", {user:name,password:pwd})
    .then(data => {
        //登陸失敗,先不討論
        if (data.data.status != 200) {
          //iViewUi的友好提示
          this.$Message.error(data.data.message);
        //登陸成功
        } else {
          //設置Vuex登陸標誌爲true，默認userLogin爲false
          this.$store.dispatch("userLogin", true);
          //Vuex在用戶刷新的時候userLogin會回到默認值false，因此咱們須要用到HTML5儲存
          //咱們設置一個名爲Flag，值爲isLogin的字段，做用是若是Flag有值且爲isLogin的時候，證實用戶已經登陸了。
          localStorage.setItem("Flag", "isLogin");
          //iViewUi的友好提示
          this.$Message.success(data.data.message);
          //登陸成功後跳轉到指定頁面
          this.$router.push("/home");
        }
 });

Vuex裏面我是這樣寫的（若是項目不須要Vuex，那麼直接使用HTML5儲存就能夠了）：

export const store = new Vuex.Store({
  // 設置屬性
  state: {
    isLogin: false,
  },

  // 獲取屬性的狀態
  getters: {
    //獲取登陸狀態
    isLogin: state => state.isLogin,
  },

  // 設置屬性狀態
  mutations: {
    //保存登陸狀態
    userStatus(state, flag) {
      state.isLogin = flag
    },
  },

  // 應用mutations
  actions: {
    //獲取登陸狀態
    userLogin({commit}, flag) {
      commit("userStatus", flag)
    },
  }
})

重點來了~，在mian.js裏

router.beforeEach((to, from, next) => {

  //獲取用戶登陸成功後儲存的登陸標誌
  let getFlag = localStorage.getItem("Flag");

  //若是登陸標誌存在且爲isLogin，即用戶已登陸
  if(getFlag === "isLogin"){

    //設置vuex登陸狀態爲已登陸
    store.state.isLogin = true
    next()

    //若是已登陸，還想一想進入登陸註冊界面，則定向回首頁
    if (!to.meta.isLogin) {
       //iViewUi友好提示
      iView.Message.error('請先退出登陸')
      next({
        path: '/home'
      })
    }
  
  //若是登陸標誌不存在，即未登陸
  }else{

    //用戶想進入須要登陸的頁面，則定向回登陸界面
    if(to.meta.isLogin){
      next({
        path: '/login',
      })
      //iViewUi友好提示
      iView.Message.info('請先登陸')
    //用戶進入無需登陸的界面，則跳轉繼續
    }else{
      next()
    }

  }

});

router.afterEach(route => {
  window.scroll(0, 0);
});

這樣就已經完成了Vue的登陸註冊，當用戶關閉瀏覽器或者次日再次進入網站，用戶依舊能夠保持着登陸的狀態直到用戶手動退出登陸。

Tips：用戶退出只須要localStorage.removeItem("Flag")便可

若是有什麼疑問歡迎留言，有錯誤或者有更簡單的方法歡迎大力指出~~