7-9 权限管理之路由守卫判断用户登录状态

目录：

• permission.js 中返回 token
• 登录是保存token：保存在vuex里、保存在cookie里。
• 路由守卫根据判断token存不存在，判断用户页面跳转

//判断用户登录状态，未登录跳转到登录页面，以登录跳转到首页
router.beforeEach((to,from,next) => {
  //从cookie里获取token，防止刷新后 token 丢失
  store.commit('getToken');
  let token = store.state.user.token;
  if (!token && to.name !== 'login'){
    next({name: 'login'})
  }else {
    next()
  }
});

一、 permission.js 中返回 token

编辑permission.js，获取返回token值

import Mock from 'mockjs'
export default {
  getMenu: config => {
        ...{
        return {
          code: 20000,
          data: {  //data中获取token值
            ......,
            token: Mock.Random.guid(),
            message: '获取成功'
          }
        }
      } else if ....
  }
}

二、登录是保存token：保存在vuex里、保存在cookie里

这边我们需要在store目录下新增一个user.js文件专门存放 用用的 cookie值的。目录结构如下：

....
-src
    -api
        ...
    ....
    -store
        -modules
            -tab.js
            -user.js  //存放用户的cooke的状态
        -index.js
    ....
....

编写user.js文件：

import Cookie from 'js-cookie'
export default {
  state: {
    token: ''
  },
  mutations: {
    setToken(state, val) {
      state.token = val
      Cookie.set('token', val)
    },
    clearToken(state) {
      state.token = ''
      Cookie.remove('token')
    },
    getToken(state) {
      state.token = Cookie.get('token')
    }
  },
  actions: {}
}

这个时候需要设置一下登录时候的token

methods: {
    login() {
      this.$http.post('api/permission/getMenu', this.form).then(res => {
        res = res.data;
        if(res.code === 20000 ) {
          this.$store.commit('clearMenu');//防止二次登录，先清理cookie
          this.$store.commit('setMenu',res.data.menu);
          this.$store.commit('setToken',res.data.token); //设置token
          this.$store.commit('addMenu',this.$router);
          this.$router.push({name: 'home'});
        }else{
          this.$message.warning(res.data.message)
        }
      })
    }
  }
}

这边需要注意一下，我们再新增user.js的时候，需要在index.js文件中，导出：

....

import tab from './modules/tab.js'
import user from './modules/user.js'

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    tab,
    user  //导出user
  }
})

三、路由守卫根据判断token存不存在，判断用户页面跳转

编辑main.js，添加路由守卫

.....

const router = new VueRouter({
  routes
});

//判断用户登录状态，未登录跳转到登录页面，以登录跳转到首页
router.beforeEach((to,from,next) => {
  //从cookie里获取token，防止刷新后 token 丢失
  store.commit('getToken');
  let token = store.state.user.token;
  if (!token && to.name !== 'login'){
    next({name: 'login'})
  }else {
    next()
  }
});

/* eslint-disable no-new */
new Vue({
 。。。。
}).$mount('#app');

四、退出登录

这边就要在我们的Header.vue中有一个登录 按钮，我们绑定事件，编辑 Header.vue

<template>
    <header>
      <div class="l-content">
        ....
          <el-dropdown-menu slot="dropdown">
            ...   <!--el-dropdown-item没有给我提供click事件，我们需要加.native触发原生事件-->
            <el-dropdown-item icon="el-icon-switch-button"@click.native="logOut">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </header>
</template>

<script>
    import { mapState } from 'vuex'
    export default {
      ....,
      methods:{
        ...,
        logOut(){
          this.$store.commit('clearToken');  //清楚token
          this.$store.commit('clearMenu');    //清楚菜单
          location.reload();  //重新加载
        }
      }
    }
</script>