本文實例講述了vue路由守衛+登錄態管理。分享給大家供大家參考，具體如下：

在路由文件需要守衛的path后面加上meta

{path: '/home',component: home,meta:{requireAuth:true}}

在main.js里面加上

//路由守衛router.beforeEach((to, from, next) => { console.log(to); console.log(from); if (to.meta.requireAuth) { // 判斷該路由是否需要登錄權限  if(JSON.parse(localStorage.getItem('islogin'))){ //判斷本地是否存在access_token   next();  }else {   next({    path:'/login'   })  } } else {  next(); } /*如果本地 存在 token 則 不允許直接跳轉到 登錄頁面*/ if(to.fullPath == "/login"){  if(JSON.parse(localStorage.getItem('islogin'))){   next({    path:from.fullPath   });  }else {   next();  } }});

其中islogin是登錄態，就是true or false，true表示登錄，false表示未登錄，存放在localStorage里面，因為localStorage里面只能存字符串，所以存進去的時候需要localStorage.setItem(‘islogin',JSON.stringify(islogin));將islogin變為String類型，取出來的時候需要將islogin轉化為Boolean類型，就比如JSON.parse(localStorage.getItem(‘islogin'))這樣。

那么還有一個問題，就是islogin登錄態的管理，vue不能實時監測localStorage的變化，需要實時監測islogin的變化來在頁面顯示登錄還是已經登錄，我用的是vuex+localStorage來管理islogin。展示部分代碼

//store.js中import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state:{    //是否登錄判斷    islogin:'' }, mutations:{  login:(state,n) => {    //傳入登錄狀態islogin    let islogin = JSON.parse(n);    localStorage.setItem('islogin',JSON.stringify(islogin));    console.log(islogin);    state.islogin = islogin;  } }}

在需要改變登錄態的頁面只要觸發上面這個login方法就可以了

//這里是登錄login() {    let flag = true；    this.$store.commit('login',flag);    this.$router.push("/home");    console.log("登錄成功");}//這里是退出登錄exit() {    let flag = false；    this.$store.commit('login',flag);    this.$router.push("/login");    console.log("退出登錄");}

登錄注冊部分樣式參考的element-ui

登錄注冊

<template>    <div class="logReg">    <!-- 登錄 -->        <div class="login" v-show="flag">            <div class="login-title">登錄</div>            <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="login-ruleForm">             <el-form-item label="賬號" prop="count2">              <el-input type="string" v-model="ruleForm2.count2" placeholder="請輸入您的賬號"></el-input>             </el-form-item>             <el-form-item label="密碼" prop="pass2">              <el-input type="password" v-model="ruleForm2.pass2" autocomplete="off" placeholder="請輸入您的密碼"></el-input>             </el-form-item>             <el-form-item>              <el-button type="primary" @click="submitForm2('ruleForm2')">提交</el-button>              <el-button @click="resetForm2('ruleForm2')">重置</el-button>             </el-form-item>            </el-form>            <div @click="register()" class="toregister" >沒有賬號？<span>立即注冊</span></div>        </div>        <!-- 注冊 -->        <div class="register" v-show="!flag">            <div class="register-title">注冊</div>            <el-form :model="ruleForm1" status-icon :rules="rules1" ref="ruleForm1" label-width="100px" class="register-ruleForm">             <el-form-item label="賬號" prop="count1">              <el-input type="string" v-model="ruleForm1.count1" placeholder="請輸入您的賬號"></el-input>             </el-form-item>             <el-form-item label="密碼" prop="pass1">              <el-input type="password" v-model="ruleForm1.pass1" autocomplete="off" placeholder="請輸入您的密碼"></el-input>             </el-form-item>             <el-form-item label="確認密碼" prop="checkPass">              <el-input type="password" v-model="ruleForm1.checkPass" autocomplete="off" placeholder="請確認您的密碼"></el-input>             </el-form-item>             <el-form-item>              <el-button type="primary" @click="submitForm1('ruleForm1')">提交</el-button>              <el-button @click="resetForm1('ruleForm1')">重置</el-button>             </el-form-item>            </el-form>            <div @click="register()" class="toregister" >已有賬號？<span>立即登錄</span></div>        </div>    </div></template>