用戶前臺登錄后，后臺返回一個token，將該token存儲到store中，并設(shè)置到header中，每次發(fā)起請求時都會攜帶該token，用于后臺進行權(quán)限校驗

// 登錄方法 login.vue
 handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch("user/login", this.loginForm)
            .then(() => {
              this.$router.push({ path: this.redirect || "/" });
              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

在store 的user.js中定義了該方法

 login({ commit }, userInfo) {
    const { userName, userPassword } = userInfo;
    return new Promise((resolve, reject) => {
      login({ userName: userName.trim(), userPassword: userPassword })
        .then((response) => {
          const { data } = response;
          commit("SET_TOKEN", data.token);
          setToken(data.token);
          resolve();
        })
        .catch((error) => {
          reject(error);
        });
    });
  },

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_AUTHORITIES: (state, authorities) => {
    state.authorities = authorities;
  },
};

此時登錄成功后，后臺將返回一個token

在請求攔截器中將token添加到請求頭上，在響應(yīng)攔截器中設(shè)置未登錄狀態(tài)訪問時跳轉(zhuǎn)到登錄頁面

import axios from "axios";
import { MessageBox, Message } from "element-ui";
import store from "@/store";
import { getToken, removeToken } from "@/utils/auth";
import router from "@/router";

// create an axios instance
const service = axios.create({
  baseURL: "http://localhost:8080", // url = base url + request url
  timeout: 5000, // request timeout
});

// request interceptor
service.interceptors.request.use(
  (config) => {
    if (store.getters.token) {
      config.headers["token"] = getToken();
    }
    return config;
  },
  (error) => {
    console.log(error);
    return Promise.reject(error);
  }
);

//  response 攔截器
service.interceptors.response.use(
  (response) => {
    const res = response.data;

    // if the custom code is not 20000, it is judged as an error.
    if (res.code !== 200 && res.code !== 201) {
      Message({
        message: res.message || "Error",
        type: "error",
        duration: 5 * 1000,
      });

      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // to re-login
        MessageBox.confirm(
          "You have been logged out, you can cancel to stay on this page, or log in again",
          "Confirm logout",
          {
            confirmButtonText: "Re-Login",
            cancelButtonText: "Cancel",
            type: "warning",
          }
        ).then(() => {
          store.dispatch("user/resetToken").then(() => {
            location.reload();
          });
        });
      }
      if (res.code == 401) {
        removeToken();
        router.replace({
          path: "/login",
        });
      }
      return Promise.reject(new Error(res.message || "Error"));
    } else {
      return res;
    }
  },
  (error) => {
    console.log("err" + error); // for debug
    Message({
      message: error.message,
      type: "error",
      duration: 5 * 1000,
    });
    return Promise.reject(error);
  }
);

export default service;

?在permission.js 中進行相關(guān)代碼編寫 （獲取用戶的信息，動態(tài)路由的生成加載）

?router.beforeEach（）路由攔截（）

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: false }); // NProgress Configuration

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();
  const hasRoles =
    store.state.user.authorities && store.state.user.authorities.length > 0;
  // 如果有token再跳轉(zhuǎn)到登錄頁面時，根據(jù)獲取的角色信息進行頁面跳轉(zhuǎn)
  if (hasToken) {
    if (to.path === "/login") {
      if (store.state.user.authorities) {
        if (store.state.user.authorities.includes("ROLE_ADMIN")) {
          next({ path: "/" });
        } else {
          next({ path: "/user" });
        }
      } else {
        next({ path: "/" });
      }
      NProgress.done();
    } else {
      // 獲取登錄用戶名 如果用戶名存在說明用戶已經(jīng)登錄且獲得了用戶信息，直接放行，如果沒有用戶名，就進行用戶信息獲取
      const hasGetUserInfo = store.getters.name;
      if (hasGetUserInfo) {
        next();
      } else {
        try {
          //判斷用戶角色是否存在
          if (!hasRoles) {
            let userInfo = await store.dispatch("user/getInfo"); // 獲取用戶信息
            // 根據(jù)獲得到的用戶信息，獲取用戶角色信息并動態(tài)生成路由
            let routes = await store.dispatch(
              "permission/getAsyncRoutes",
              userInfo.user.authorities
            );
            router.options.routes = routes;
            router.addRoutes(routes); // 將生成的動態(tài)路由添加到原先的路由中
            next({ ...to, replace: true }); // 保證路由已掛載

            // 根據(jù)用戶角色進行登錄后的首頁面跳轉(zhuǎn)
            if (store.state.user.authorities) {
              if (store.state.user.authorities.includes("ROLE_ADMIN")) {
                next({ path: "/" });
              } else {
                next({ path: "/user/user" });
              }
            }
          }
        } catch (error) {
          // remove token and go to login page to re-login
          await store.dispatch("user/resetToken");
          Message.error(error || "Has Error");
          next(`/login`);
          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`);
      NProgress.done();
    }
  }
});

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

獲取用信息的方法定義在store的user.js中

  // 獲取用戶信息
  getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo()
        .then((response) => {
          const { data } = response;
          if (!data) {
            return reject("Verification failed, please Login again.");
          }
          const { username, authorities } = data.user;
          // 將用戶名，和用戶角色信息存儲到store中
          commit("SET_NAME", username); 
          commit("SET_AUTHORITIES", authorities);
          resolve(data);
        })
        .catch((error) => {
          reject(error);
        });
    });
  },

在store 的?permission.js 為動態(tài)路由的相關(guān)方法和存儲?

import { asyncRoutes, constantRoutes } from "@/router";
/**
 * 通過meta中的roles信息判斷用戶是否有權(quán)限
 * @param roles
 * @param route
 */
function hasPermission(roles, route) {
  if (route.meta && route.meta.roles) {
    return roles.some((role) => route.meta.roles.includes(role));
  } else {
    return true;
  }
}

/**
 * 根據(jù)角色和配置生成當(dāng)前用戶的路由
 * @param {array} routes 配置的路由
 * @param {array} roles 用戶角色
 */
let GenerateRoutes = (routes, roles) => {
  let res = [];
  routes.forEach((route) => {
    const tmp = { ...route };

    if (hasPermission(roles, tmp)) {
      if (tmp.children) {
        tmp.children = GenerateRoutes(tmp.children, roles);
      }
      // console.log(tmp);
      res.push(tmp);
    }
  });

  return res;
};

const getDefaultState = () => {
  return {
    roles: [],
    routes: constantRoutes, // 用于配置頁面導(dǎo)航等
  };
};
const state = getDefaultState();
const mutations = {
  SET_ROLES: (state, roles) => {
    state.roles = roles;
  },
  SET_ROUTES: (state, routes) => {
    state.routes = routes;
  },
};

const actions = {
  /**根據(jù)角色獲取路由配置 */
  getAsyncRoutes({ commit }, roles) {
    let filterRoutes = GenerateRoutes(asyncRoutes, roles);
    let res = constantRoutes.concat(filterRoutes);
    commit("SET_ROUTES", res);
    return res;
  },
};

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

將新增的js文件引入store的index.js文件中

import Vue from "vue";
import Vuex from "vuex";
import getters from "./getters";
import app from "./modules/app";
import settings from "./modules/settings";
import user from "./modules/user";
import permission from "./modules/permission"; 

Vue.use(Vuex);

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

export default store;

路由文件

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

/* Layout */
import Layout from "@/layout";

// 默認路由
export const constantRoutes = [
  {
    path: "/login",
    component: () => import("@/views/login/index"),
    hidden: true,
  },
  {
    path: "/404",
    component: () => import("@/views/404"),
    hidden: true,
  },
];
// 自定義動態(tài)路由，在meta中添加了roles,通過roles中是角色進行動態(tài)生成不同角色的動態(tài)路由
export const asyncRoutes = [
  {
    path: "/",
    component: Layout,
    redirect: "/employee",
    meta: { roles: ["ROLE_ADMIN"] },
    children: [
      {
        path: "employee",
        name: "Employee",
        component: () => import("@/views/employee/index"),
        // meta: { title: "員工管理", icon: "el-icon-s-custom" },
        meta: {
          roles: ["ROLE_ADMIN"],
          title: "員工管理",
          icon: "el-icon-s-custom",
        },
      },
    ],
  },
 {
    path: "/user",
    component: Layout,
    meta: { roles: ["ROLE_DEPT", "ROLE_EMP"] },
    children: [
      {
        path: "user",
        name: "User",
        component: () => import("@/views/user/index"),
        meta: {
          roles: ["ROLE_DEPT", "ROLE_EMP"],
          title: "個人信息",
          icon: "el-icon-setting",
        },
      },
    ],
  },
// 404 page must be placed at the end !!!
  { path: "*", redirect: "/404", hidden: true },
];

const createRouter = () =>
  new Router({
    // mode: 'history', // require service support
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRoutes,
  });

const router = createRouter();

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter();
  router.matcher = newRouter.matcher; // reset router
}

export default router;

?此時登錄成功并獲取到用戶信息后，可在控制臺看到存儲到store中的信息

?登錄成功界面實例

管理員

部門經(jīng)理

基本員工文章來源地址http://www.zghlxwxcb.cn/news/detail-518902.html

到了這里，關(guān)于Vue+Element UI 權(quán)限管理（角色 ）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！