权限控制-前端控制

在 router 文件夹当中添加 JS 文件

_import_development.js

// 开发环境导入组件
module.exports = file => require('@/views/' + file + '.vue').default;

_import_production.js

// 生产环境导入组件
module.exports = file => () => import('@/views/' + file + '.vue');

删除 router 当中之前写的静态的路由

export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: '/',
      name: '首页',
      component: () => import('@/views/dashboard/index'),
      meta: {title: '首页', icon: 'dashboard'}
    }]
  },
  {
    path: '/dashboard',
    component: Layout,
    children: [{
      path: '/',
      name: 'dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: {title: 'dashboard', icon: 'dashboard'}
    }],
    hidden: true
  },
]

在 store/modules/user.js 当中动态获取路由

import {login, logout, getInfo, getMoveRouter} from '@/api/user'
import {getToken, setToken, removeToken} from '@/utils/auth'
import {resetRouter} from '@/router/index';

const getDefaultState = () => {
  return {
    token: getToken(),
    name: '',
    avatar: ''
  }
}

const state = getDefaultState()

const mutations = {
  RESET_STATE: (state) => {
    Object.assign(state, getDefaultState())
  },
  SET_TOKEN: (state, token) => {
    state.token = token
  },
  SET_NAME: (state, name) => {
    state.name = name
  },
  SET_AVATAR: (state, avatar) => {
    state.avatar = avatar
  },
  SET_BUTTONS: (state, buttons) => {
    state.buttons = buttons
  },
  SET_ROLES: (state, roles) => {
    state.roles = roles
  },
  SET_MENU: (state, menus) => {
    state.menus = menus
  }
}

const actions = {
  // user login
  login({commit}, userInfo) {
    return new Promise((resolve, reject) => {
      login(userInfo).then(response => {
        const {data} = response;
        commit('SET_TOKEN', data.token);
        setToken(data.token);
        resolve();
      }).catch(error => {
        reject(error);
      });
    });
  },
  // get user info
  getInfo({commit, state}) {
    return new Promise((resolve, reject) => {
      getInfo(state.token).then(response => {
        const {data} = response;
        // 验证返回的roles是否是一个非空数组
        if (data.roles && data.roles.length > 0) {
          commit('SET_ROLES', data.roles);
        } else {
          reject('getInfo: roles must be a non-null array !');
        }
        const buttonAuthList = [];
        data.permissionValueList.forEach(button => {
          buttonAuthList.push(button);
        })
        commit('SET_NAME', data.name);
        commit('SET_AVATAR', data.avatar);
        commit('SET_BUTTONS', buttonAuthList);
        resolve(data);
      }).catch(error => {
        reject(error);
      });
    });
  },
  // user logout
  logout({commit, state}) {
    return new Promise((resolve, reject) => {
      logout(state.token).then(() => {
        // 清空cookie
        removeToken();
        resetRouter();
        // 清空前端vuex中存储的数据
        commit('SET_TOKEN', '');
        commit('SET_ROLES', []);
        commit('SET_BUTTONS', []);
        commit('RESET_STATE');
        commit('SET_MENU', []);
        resolve();
      }).catch(error => {
        reject(error);
      });
    });
  },
  // remove token
  resetToken({commit}) {
    return new Promise(resolve => {
      // must remove  token  first
      removeToken();
      commit('RESET_STATE');
      resolve();
    })
  },

  getRouter({commit, state}) {
    return new Promise((resolve, reject) => {
      getMoveRouter().then(res => {
        const menus = res.data.menuList;
        menus.push({
          path: "/404",
          component: "404",
          hidden: true
        }, {
          path: "*",
          redirect: "/404",
          hidden: true
        });
        // 把 name,保存到vuex中
        commit('SET_MENU', menus.reverse());
        resolve();
      }).catch(error => {
        reject(error);
      });
    });
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

修改 user.js api文件信息内容

import request from '@/utils/request';

export function login(data) {
  return request({
    url: '/service_auth/admin/index/login',
    method: 'post',
    data
  });
}

export function getInfo(token) {
  return request({
    url: '/service_auth/admin/index/info',
    method: 'get',
    params: { token }
  });
}

export function logout() {
  return request({
    url: '/service_auth/admin/index/logout',
    method: 'post'
  });
}

// 获取菜单权限数据
export function getMoveRouter() {
  return request({
    url: '/service_auth/admin/index/menu',
    method: 'get'
  });
}

修改 store/getters.js

const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
  token: state => state.user.token,
  avatar: state => state.user.avatar,
  name: state => state.user.name,
  menus: state => state.user.menus,
  buttons: state => state.user.buttons,
  roles: state => state.user.roles
}
export default getters

修改 permission.js 如下的内容大体逻辑就是把从后台请求得到的路由保存在全局对象上，然后替换成我们自己的动态路由信息

import router from './router'
import store from './store'
import {Message} from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import {getToken} from '@/utils/auth' // get token from cookie
import getPageTitle from '@/utils/get-page-title'

NProgress.configure({showSpinner: true}) // NProgress Configuration

// 获取组件的方法
const _import = require('./router/_import_' + process.env.NODE_ENV);
import Layout from "@/layout";

const whiteList = ['/login'] // no redirect whitelist

router.beforeEach(async (to, from, next) => {
  // start progress bar
  NProgress.start();

  // set page title
  document.title = getPageTitle(to.meta.title);

  // determine whether the user has logged in
  const hasToken = getToken();

  if (hasToken) {
    if (to.path === '/login') {
      // if is logged in, redirect to the home page
      next({path: '/'})
      NProgress.done();
    } else {
      const hasGetUserInfo = store.getters.name
      if (hasGetUserInfo) {
        next();
      } else {
        try {
          // get user info
          await store.dispatch('user/getInfo');
          // 触发获取路由表的接口
          await store.dispatch('user/getRouter');
          if (store.getters.menus.length < 1) {
            global.antRouter = [];
            next();
          }

          // 过滤路由
          const menus = filterAsyncRouter(store.getters.menus);
          // 动态添加路由
          router.addRoutes(menus);
          // 将路由数据传递给全局变量，做侧边栏渲染的工作
          global.antRouter = menus;
          // 正常走
          next("/");
        } catch (error) {
          // remove token and go to login page to re-login
          await store.dispatch('user/resetToken');
          Message.error(error || 'Has Error');
          next(`/login?redirect=${to.path}`);
          NProgress.done();
        }
      }
    }
  } else {
    /* has no token*/

    if (whiteList.indexOf(to.path) !== -1) {
      // in the free login whitelist, go directly
      next();
    } else {
      // other pages that do not have permission to access are redirected to the login page.
      next(`/login?redirect=${to.path}`)
      NProgress.done();
    }
  }
})

router.afterEach(() => {
  // finish progress bar
  NProgress.done();
})

// 遍历后台传来的路由字符串，转换为组件对象
function filterAsyncRouter(asyncRouterMap) {
  return asyncRouterMap.filter(route => {
    if (route.component) {
      if (route.component === 'Layout') {
        route.component = Layout;
      } else {
        try {
          // 导入组件
          route.component = _import(route.component);
        } catch (error) {

          // 导入组件
          route.component = _import('dashboard/index');
        }
      }
    }
    if (route.children && route.children.length) {
      route.children = filterAsyncRouter(route.children);
    }
    return true;
  });
}

让用户头像显示

将 vue-admin-template 的路由信息改为我们自己从后台请求的

return this.$router.options.routes.concat(global.antRouter);