vue路由守衛(wèi)+登錄態(tài)管理實例分析
更新時間：2019年05月21日 11:45:01 作者：前端那點事
這篇文章主要介紹了vue路由守衛(wèi)+登錄態(tài)管理,結(jié)合實例形式分析了vue路由守衛(wèi)與登錄態(tài)管理相關(guān)操作步驟與實現(xiàn)技巧,需要的朋友可以參考下
本文實例講述了vue路由守衛(wèi)+登錄態(tài)管理。分享給大家供大家參考，具體如下：
在路由文件需要守衛(wèi)的path后面加上meta
{path: '/home',component: home,meta:{requireAuth:true}}
在main.js里面加上
//路由守衛(wèi)
router.beforeEach((to, from, next) => {
console.log(to);
console.log(from);
if (to.meta.requireAuth) { // 判斷該路由是否需要登錄權(quán)限
if(JSON.parse(localStorage.getItem('islogin'))){ //判斷本地是否存在access_token
next();
}else {
next({
path:'/login'
})
}
}
else {
next();
}
/*如果本地 存在 token 則 不允許直接跳轉(zhuǎn)到 登錄頁面*/
if(to.fullPath == "/login"){
if(JSON.parse(localStorage.getItem('islogin'))){
next({
path:from.fullPath
});
}else {
next();
}
}
});
其中islogin是登錄態(tài)，就是true or false，true表示登錄，false表示未登錄，存放在localStorage里面，因為localStorage里面只能存字符串，所以存進(jìn)去的時候需要localStorage.setItem(‘islogin',JSON.stringify(islogin));將islogin變?yōu)镾tring類型，取出來的時候需要將islogin轉(zhuǎn)化為Boolean類型，就比如JSON.parse(localStorage.getItem(‘islogin'))這樣。
那么還有一個問題，就是islogin登錄態(tài)的管理，vue不能實時監(jiān)測localStorage的變化，需要實時監(jiān)測islogin的變化來在頁面顯示登錄還是已經(jīng)登錄，我用的是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) => {
//傳入登錄狀態(tài)islogin
let islogin = JSON.parse(n);
localStorage.setItem('islogin',JSON.stringify(islogin));
console.log(islogin);
state.islogin = islogin;
}
}
}
在需要改變登錄態(tài)的頁面只要觸發(fā)上面這個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="確認(rèn)密碼" prop="checkPass">
<el-input type="password" v-model="ruleForm1.checkPass" autocomplete="off" placeholder="請確認(rèn)您的密碼"></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 {
//向后臺請求驗證賬號是否重復(fù)
callback();
}
};
//注冊密碼驗證
var validatePass1 = (rule, value, callback) => {
if (value === '') {
callback(new Error('請輸入密碼'));
} else {
if (this.ruleForm1.checkPass !== '') {
this.$refs.ruleForm1.validateField('checkPass');
}
callback();
}
};
//注冊密碼確認(rèn)
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>
希望本文所述對大家vue.js程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue滾動軸插件better-scroll的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要介紹了vue Tab切換以及緩存頁面處理的幾種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要為大家介紹了vue?parseHTML函數(shù)的源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
本篇文章主要介紹了VUE實現(xiàn)日歷組件功能，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要介紹了Vue SPA 如何解決瀏覽器緩存問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue3+vite3+typescript實現(xiàn)驗證碼功能及表單驗證效果
這篇文章主要介紹了vue3+vite3+typescript實現(xiàn)驗證碼功能及表單驗證效果,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
詳解Vuejs2.0 如何利用proxyTable實現(xiàn)跨域請求
本篇文章主要介紹了Vuejs2.0 如何利用proxyTable實現(xiàn)跨域請求，具有一定的參考價值，有興趣的可以了解一下2017-08-08
下面小編就為大家分享一篇vue組件傳遞對象中實現(xiàn)單向綁定的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
詳解Vue2.X的路由管理記錄之 鉤子函數(shù)（切割流水線）
本篇文章主要介紹了Vue2.X的路由管理記錄之 鉤子函數(shù)（切割流水線），具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
vue中響應(yīng)式布局如何將字體大小改成自適應(yīng)
這篇文章主要介紹了vue中響應(yīng)式布局如何將字體大小改成自適應(yīng)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09