vue路由守卫+登录态管理实例分析

本文实例讲述了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>