vue-router 鉴权 守卫

文章目录

• permission.js
• router.js
• store/index.js
• store/getters
• store/modules/permission

permission.js

//路由配置文件
import router from './router'
import store from './store'
//需要安装nprogress
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
//禁用进度环
NProgress.configure({ showSpinner: false })

// 路由白名单
const whiteList = ['/login']
//全局前置守卫
router.beforeEach((to, from, next) => {
  NProgress.start()
  //注意，要过滤掉/login路径，不是的话会造成无限next()死循环
  if (to.path === '/login') {
  	return
  }
  //路由白名单直接跳过
  if (whiteList.indexOf(to.path) !== -1) {
    next();
    return;
  }
  
  //鉴权拦截操作
  let token = localStorage.getItem('token')
  if (token) {
	let permissions = store.getters.permissions
	if (!permissions || permissions.length === 0) {
	 store.dispatch('GetUserPermissions').then( async () => {
        next({ ...to, replace: true })
      }).catch(err => {
        next('/login')
      })
	 return
	}
	next()
  } else {
	next('/login')
  }
  
})

//全局后置守卫
router.afterEach(() => {
  NProgress.done()
})

 router.js

import Vue from "vue"
import Router from "vue-router"
Vue.use(Router)

export default new Router({
  mode: "history", // 去掉url中的#
  scrollBehavior: () => ({ y: 0 }),
  routes: [
	{
    path: "/login",
    component: () => import("@/views/login")
   }
  ]
})

store/index.js

import getters from './getters'
import permission from './modules/permission'
Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    permission
  },
  getters
})

export default store

store/getters

//定义permissions列表数据
const getters = {
  permissions: state => state.permissions.permissions
}
export default getters

store/modules/permission

const permission = {
  state: {
    permissions: []
  },
  mutations: {
	SET_PERMISSIONS: (state, permissions) => {
      state.permissions = permissions
    }
  },
  actions: {
	// 获取用户权限
    GetUserPermissions({ commit, state }) {
      return new Promise((resolve, reject) => {
        let params = {
          id: 'xxx'
        }
        Api.getPermissionList(params).then(res => {
          let permissions = res.permissionList;
          if (!permissions || (Array.isArray(permissions) && permissions.length === 0)) {
            let error = new Error;
            error.message = '该用户权限未配置，请联系管理员'
            reject(error)
            return;
          }

          commit('SET_PERMISSIONS', res.permissionList);
          resolve(res.permissionList)
        }).catch(error => {
          reject(error)
        })
      })
    }
  }
}