本文实例讲述了vue路由守卫+登录态管理。分享给大家供大家参考,具体如下:
在路由文件需要守卫的路径后面加上元
{路径:/home,组件:家里,元:{requireAuth:真}}
之前
在main.js里面加上
//路由守卫
路由器。beforeEach(下),从=比;{
console.log ();
console.log(从);
如果(to.meta.requireAuth){//判断该路由是否需要登录权限
如果(JSON.parse (localStorage.getItem (islogin))){//判断本地是否存在access_token
next ();
其他}{
下一个({
路径:/登录的
}）
}
}
其他{
next ();
}/*如果本地存在令牌则不允许直接跳转到登录页面*/如果()。fullPath=="/登录"){
如果(JSON.parse (localStorage.getItem (islogin))) {
下一个({
路径:from.fullPath
}）;
其他}{
next ();
}
}
}）;
之前
其中islogin是登录态,就是真或假,真表示登录,假表示未登录,存放在localStorage里面,因为localStorage里面只能存字符串,所以存进去的时候需要localStorage.setItem (islogin, JSON.stringify (islogin));将islogin变为字符串类型,取出来的时候需要将islogin转化为布尔类型,就比如JSON.parse (localStorage.getItem (islogin))这样。
那么还有一个问题,就是islogin登录态的管理,vue不能实时监测localStorage的变化,需要实时监测islogin的变化来在页面显示登录还是已经登录,我用的是vuex + localStorage来管理islogin。展示部分代码
//store.js中
从“Vue”进口Vue
从“Vuex”进口Vuex
Vue.use (Vuex)
出口默认新Vuex.Store ({
状态:{//是否登录判断
islogin:“
}，
突变:{
登录:(状态,n)=比;{//传入登录状态islogin
让islogin=JSON.parse (n);
localStorage.setItem (islogin, JSON.stringify (islogin));
console.log (islogin);
状态。islogin=islogin;
}
}
}
之前
在需要改变登录态的页面只要触发上面这个登录方法就可以了
//这里是登录
登录(){
让国旗=true;
store.commit美元。(“登录”,国旗);
router.push美元。(“/home”);
console.log(“登录成功”);
}//这里是退出登录
退出(){
让国旗=false;
store.commit美元。(“登录”,国旗);
美元。router.push("/登录");
console.log(“退出登录”);
}
之前
登录注册部分样式参考的element-ui
登录注册
& lt; template>
& lt; div类=發ogReg”比;
& lt; !——登录——比;
& lt; div类="登录" v-show=肮臁北?
& lt; div类=" login-title "祝辞登录& lt;/div>
& lt; el-form:模型=" ruleForm2 "状态图标:规则=皉ules2 ref=皉uleForm2 label-width”=?00 px”类=發ogin-ruleForm”比;
& lt; el-form-item标签="账号”道具=笔谴印氨?
& lt; el-input类型=v模型=" ruleForm2“字符串”。是从“占位符=扒胧淙肽恼撕拧弊４? lt;/el-input>
& lt;/el-form-item>
& lt; el-form-item标签="密码”道具=皃ass2”比;
& lt; el-input类型=v模型=" ruleForm2“密码”。pass2“自动完成=" "占位符="请输入您的密码”祝辞& lt;/el-input>
& lt;/el-form-item>
& lt; el-form-item>
& lt; el-button类型=爸鳌盄click=皊ubmitForm2 (ruleForm2)”在提交& lt;/el-button>
& lt; el-button @click=" resetForm2 (ruleForm2)”在重置& lt;/el-button>
& lt;/el-form-item>
& lt;/el-form>
& lt; div @click=白⒉?)”类=皌oregister”在没有账号? & lt; span>立即注册& lt;/span> & lt;/div>
& lt;/div>
& lt; !——注册——比;
& lt; div类="注册" v-show=?旗帜”比;
& lt; div类=" register-title "祝辞注册& lt;/div>
& lt; el-form:模型=" ruleForm1 "状态图标:规则=皉ules1 ref=皉uleForm1 label-width”=?00 px”类=皉egister-ruleForm”比;
& lt; el-form-item标签="账号”道具=癱ount1”比;
& lt; el-input类型=v模型=" ruleForm1“字符串”。count1 "占位符="请输入您的账号”祝辞& lt;/el-input>
& lt;/el-form-item>
& lt; el-form-item标签="密码”道具=皃ass1作为”比;
& lt; el-input类型=v模型=" ruleForm1“密码”。pass1作为“自动完成=" "占位符="请输入您的密码”祝辞& lt;/el-input>
& lt;/el-form-item>
& lt; el-form-item标签="确认密码”道具=癱heckPass”比;
& lt; el-input类型=v模型=" ruleForm1“密码”。checkPass“自动完成=" "占位符="请确认您的密码”祝辞& lt;/el-input>
& lt;/el-form-item>
& lt; el-form-item>
& lt; el-button类型=爸鳌盄click=皊ubmitForm1 (ruleForm1)”在提交& lt;/el-button>
& lt; el-button @click=" resetForm1 (ruleForm1)”在重置& lt;/el-button>
& lt;/el-form-item>
& lt;/el-form>
& lt; div @click=白⒉?)”类=皌oregister”在已有账号? & lt; span>立即登录& lt;/span> & lt;/div>
& lt;/div>
& lt;/div>
& lt;/template>
