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")便可

若是有什么疑问欢迎留言，有错误或者有更简单的方法欢迎大力指出~~