一.鎖屏功能實現思路
1.在頁面中設置鎖屏密碼
2.通過vuex將鎖屏狀態存儲起來
3.由於vuex在頁面刷新后會丟失狀態,所以需要借用localStorage存儲鎖屏狀態
4.解鎖時匹配設置的鎖屏密碼時解鎖返回鎖屏前的頁面
5.因為要保證用戶在點擊鎖屏前的操作所以選擇遮罩來實現鎖屏;
6.用戶忘記鎖屏密碼可以到login頁面重新登錄
二.鎖屏功能的實現
1.鎖屏密碼未設置默認為000000，可以點擊右上角的頭像，在彈出的菜單中選擇個人中心，點擊基本信息右側的編輯圖標，之后在鎖屏密碼中輸入要設置的鎖屏密碼點擊保存即可完成設置
2.在Vuex中定義鎖屏的狀態屬性，創建對應的state，實現對鎖屏狀態的讀取寫入和清除功能。
state: {
isLock:false
},
getters: {
isLock:state=>state.isLock,
},
mutations: {
SET_LOCK(state,action){
state.isLock=true
localStorage.setItem('isLock',state.isLock)
},
CLEAR_LOCK(state,action){
state.isLock=false
localStorage.removeItem('isLock')
}
}
3.添加鎖屏頁面，該頁面提供輸入密碼和退出登錄功能
4.解鎖功能，只有當輸入的密碼和我后台設置的鎖屏密碼一致后進入鎖屏前的頁面
this.$api.get('/api/User/GetUserLockPassword',{password:this.passwd},(response)=>{
if(response.code==200){
this.passwd=''
this.passwdError=false
this.$store.state.isLock=false
localStorage.setItem('isLock',false)
this.$store.commit('CLEAR_LOCK')
}else if(response.code==666){
this.passwd=''
this.errormessage="解鎖密碼錯誤，請重新輸入"
this.passwdError=true
}
});
其實就是在index頁 import一個子組件vue 設置為全屏 通過以上狀態來控制是否顯示，easy