简单的Vue登录验证、权限管理功能实现

• 通过后端传来的用户表中的权限数据来向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的验证