vue單頁面應用簡單實現登錄邏輯

當用戶在沒有登錄的狀態下，只能夠訪問到系統的登錄界面，不管輸入的路由是什么，都會跳轉到登錄界面，當用戶登錄成功后，就會將登錄的信息保存到 sessionStorage中，話不多說，直接上代碼：

第一步是配置路由：第一個路由是不需要登錄就能夠進入的路由，第二個是需要登錄才能進入的路由

{
      path: '/Login',
      name: 'Login',
      component: Login
    }, {
      path: '/BackupWizard',
      name: 'BackupWizard',
      component: BackupWizard,
      meta: {
        requireAuth: true,  // 添加該字段，表示進入這個路由是需要登錄的
      }
    }

第二步：在登錄界面點擊登錄按鈕時，當用戶名和秘密都正確的時候，將登錄狀態存到sessionStorage，我這里是使用isLogin:true的方式存放到sessionStorage中，並且是在store中進行修改的：代碼如下：login.vue文件：

this.$store.commit('login',values.userName);
this.$router.push({name:'BackupDataView'}); //登錄成功后跳轉到的頁面

store文件：

//state中的token的初始值是false，表示未登錄
login(state,n){
      state.token=true;
      state.username=n;
      sessionStorage.setItem('isLogin',true);
      sessionStorage.setItem('name',n);  //用於全局展示是誰登錄系統
    },

第三步：在main.js文件中設置全局路由守衛，代碼如下：

router.beforeEach((to,from,next)=>{
  //window.document.title=to.meta.title;
  if(to.meta.requireAuth == true){  //需要登錄權限進入的路由
    if(store.state.token){  //取到登錄信息
       next()
    }else if(sessionStorage.getItem('isLogin')){  //得到登錄信息，進行下一步
      next();
    }else{
        next({name:'Login'});
    }
  }else{  //不需要登錄權限
     next();
  }
})

完成這些配置，簡單的登錄邏輯就算是實現完成