在路由文件需要守卫的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> <!-- 登录 --> <div v-show="flag"> <div>登录</div> <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px"> <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()" >没有账号？<span>立即注册</span></div> </div> <!-- 注册 --> <div v-show="!flag"> <div>注册</div> <el-form :model="ruleForm1" status-icon :rules="rules1" ref="ruleForm1" label-width="100px"> <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()" >已有账号？<span>立即登录</span></div> </div> </div> </template>
<script> export default{ name:'logReg', data() { //登录账号验证 var validateCount2 = (rule, value, callback) => { if (value === '') { callback(new Error('请输入账号')); } else { if (value != "admin") { callback(new Error('账号不存在')); } //向后台请求验证账号是否存在 callback(); } }; //登录密码验证 var validatePass2 = (rule, value, callback) => { if (value === '') { callback(new Error('请输入密码')); } else { if (value != "admin") { callback(new Error('密码不正确')); } //向后台验证，也可以不处理 callback(); } }; //注册账号验证 var validateCount1 = (rule, value, callback) => { if (value === '') { callback(new Error('请输入账号')); } else { //向后台请求验证账号是否重复 callback(); } }; //注册密码验证 var validatePass1 = (rule, value, callback) => { if (value === '') { callback(new Error('请输入密码')); } else { if (this.ruleForm1.checkPass !== '') { this.$refs.ruleForm1.validateField('checkPass'); } callback(); } }; //注册密码确认 var validatePassCheck = (rule, value, callback) => { if (value === '') { callback(new Error('请再次输入密码')); } else if (value !== this.ruleForm1.pass1) { callback(new Error('两次输入密码不一致!')); } else { callback(); } }; return { flag:true,//登录注册切换 //登录账号密码 ruleForm2: { pass2: '', count2:'' }, //登录验证 rules2: { count2: [ { validator: validateCount2, trigger: 'blur' } ], pass2:[ { validator: validatePass2, trigger: 'blur' } ] }, ruleForm1: { count1: '', pass1: '', checkPass: '' }, rules1: { count1: [ { validator: validateCount1, trigger: 'blur' } ], pass1:[ { validator: validatePass1, trigger: 'blur' } ], checkPass: [ { validator: validatePassCheck, trigger: 'blur' } ] }, }; }, methods: { //登录提交 submitForm2(formName) { this.$refs[formName].validate((valid) => { if (valid) { console.log("提交成功"); //提交成功之后操作 let flag = true; this.$store.commit("login",flag); this.$router.push('/home'); this.$message({ message: '恭喜，登录成功', type: 'success' }); } else { this.$message({ message: '抱歉，登录失败', type: 'warning' }); return false; } }); }, //登录框重置 resetForm2(formName) { this.$refs[formName].resetFields(); }, //注册提交 submitForm1(formName) { this.$refs[formName].validate((valid) => { if (valid) { this.$message({ message: '恭喜，注册成功，请登录', type: 'success' }); this.flag = !this.flag; } else { this.$message({ message: '抱歉，注册失败', type: 'warning' }); return false; } }); }, //注册框重置 resetForm1(formName) { this.$refs[formName].resetFields(); }, //切换登录注册 register() { this.flag = !this.flag; } }, } </script>