千锋扣丁学堂HTML5培训之vue路由守卫+登录态管理实例分析

今天千锋扣丁学HTML5培训老师给大家分享一篇关于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是登录态，就是trueorfalse，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>
<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>
<style scoped>
 .el-button--primary {
 color: #fff;
 background-color: rgba(254, 112, 26, 0.8);
 border-color: rgba(254, 112, 26, 0.9);
 }
 .el-button:focus{
 color: #333;
 background-color: rgba(255, 255, 255, 0.1);
 border-color: #dcdfe6;
 }
 .el-button:hover{
 color: rgba(254, 112, 26, 1);
 background-color: rgba(255, 255, 255, 0.1);
 border-color: rgba(254, 112, 26, 0.9);
 }
 .el-button--primary:hover {
 color: #fff;
 background-color: rgba(254, 112, 26, 0.8);
 border-color: rgba(254, 112, 26, 0.9);
 }
 .el-button--primary:focus {
 color: #fff;
 background-color: rgba(254, 112, 26, 0.8);
 border-color: rgba(254, 112, 26, 0.9);
 }
 .register,
 .login{
 margin-top: 100px;
 margin-bottom: 100px;
 padding: 40px 0px 40px 0;
 background-color: #fff;
 width: 600px;
 margin: 100px auto;
 border-radius: 8px;
 box-shadow: 0px 0px 100px rgba(0,0,0,.1);
 }
 .register .register-title,
 .login .login-title{
 font-size: 1.65rem;
 line-height: 60px;
 font-weight: bold;
 white-space: nowrap;
 margin-bottom: 16px;
 color: #555;
/* color: rgba(254, 112, 26, 0.8);*/
 }
 .register-ruleForm,
 .login-ruleForm{
 width: 500px;
 margin: 0 auto;
 padding: 0px 100px 0px 0;
 }
 .login .toregister{
 cursor: pointer;
 }
 /*注册*/
</style>

以上就是关于千锋扣丁学堂HTML5培训之vue路由守卫+登录态管理实例分析的全部内容，想要了解更多关于HTML5开发方面内容的小伙伴，请关注扣丁学堂HTML5培训官网、微信等平台，扣丁学堂IT职业在线学习教育有专业的HTML5讲师为您指导，此外扣丁学堂老师精心推出的HTML5视频教程定能让你快速掌握HTML5从入门到精通开发实战技能。