-
通过后端传来的用户表中的权限数据来向sessionStorage中存储用户权限和登录与否状态。
window.sessionStorage.setItem(‘store’,JSON.stringify(this.$store.state))
Login.vue中:
if(response.data.qx!=0){
this.$store.commit('setLoginstate',1)
this.$store.commit('setUser',1)
}
window.sessionStorage.setItem('store',JSON.stringify(this.$store.state))
store.js中:
state: {
user:1,
loginstate:0
},
getters: {
getUser(state) {
return state.user
},
getLoginstate(state) {
return state.loginstate
}
},
mutations: {
setUser(state, payload) {
state.user = payload
},
setLoginstate(state, payload) {
state.loginstate = payload
}
- 通过获取sessionStorage中的状态数据,以v-if来控制组件的显示(按钮或者时侧边导航栏某一个页面)
created() {
const qx=this.$store.getters.getUser
if(qx!==0){
console.log("低权限")
this.uploadVisible=false
this.downVisible=false
}}
- 非登录状态页面跳转的拦截
在login.vue中,登录时已经将登陆状态存储到了sessionStorage中
在router.js中,通过全局导航守卫可以根据获取到的sessionStorage中的登录状态信息进行拦截。
let store =JSON.parse( window.sessionStorage.getItem(‘store’))
router.beforeEach(async (to, from, next) => {
let store =JSON.parse( window.sessionStorage.getItem('store'))
if(store.loginstate==1||to.path=='/')) {
next()
}
else{
next("/")
}
欠缺点:后端token的验证