Vue知识点总结之权限设计

最新推荐文章于 2023-11-16 16:13:29 发布

思考的哲学

最新推荐文章于 2023-11-16 16:13:29 发布

阅读量783

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_35413855/article/details/107561149

这篇博客总结了Vue.js应用中的权限设计，包括路由权限和按钮权限。在路由权限方面，涉及了permision.js, auth.js, store/user.js, store/permision.js等文件的使用，并在main.js中整合。对于更细粒度的权限控制，文章提出了通过封装指令实现按钮级别的权限管理，例如<button>标签上使用v-permission指令来设定不同角色的访问权限。" 88187626,7335594,Keras中Dropout与正则化的应用解析,"['深度学习', '模型优化', '正则化技术', '神经网络结构', 'Keras框架']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 路由权限

permision.js

// 做全局路由
import router from "./router";
import store from "./store";
import { getToken } from "@/utils/auth"; // 从cookie获取令牌

const whiteList = ["/login"];

router.beforeEach(async (to, from, next) => {
  const hasToken = getToken();

  if (hasToken) {
    if (to.path === "/login") {
      next({ path: "/" });
    } else {
      //已登录, 获取用户角色
      const hasRoles = store.getters.roles && store.getters.roles.length > 0;
      if (hasRoles) {
        next();
      } else {
        try {
          // 先请求获取用户信息
          const { roles } = await store.dispatch("user/getInfo");

          // 根据当前用户角色动态生成路由
          const accessRoutes = await store.dispatch(
            "permission/generateRoutes",
            roles
          );

          // 添加这些路由至路由器
          router.addRoutes(accessRoutes);

          // 继续路由切换，确保addRoutes完成
          next({ ...to, replace: true });