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>