脚本宝典收集整理的这篇文章主要介绍了.net core webapi + vue 实现RBAC 基本的权限管理，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

RBAC实现最基础的权限管理webapi+vue

一、确定关系表

//权限管理表 &nbsp;  这个表可以实现左侧菜单的显示      [Table("PErmission")]    public class Permission    {        [Key]        public int Id { get; set; }        public string PermissionCode { get; set; }        public string PermissionName { get; set; }        public string PermissionIco { get; set; }        public string PermissionUrl { get; set; }        public bool Enable { get; set; } = true;        public string ParentCode { get; set; }    }        //角色表      [Table("Role")]    public class Role    {        [Key]        public int Id { get; set; }        [Required,StringLength(50)]        public string RoleName { get; set; }        public string Desc { get; set; }        public string PermissionName { get; set; }        public string Users { get; set; }​    }        //用户表     /// <summary>    /// 用户表    /// </summary>    [Table("User")]    public class User    {        [Key]        public int Id { get; set; }        public int DeptId { get; set; }        [Required,StringLength(20)]        public string UserName { get; set; }            [Required, StringLength(40)]        public string Password { get; set; }        public SexType SexType { get; set; }          [StringLength(100)]        public string Email { get; set; }        public string Roleids { get; set; }          public string DepaCodes { get; set; }    }​    public enum SexType    {         男,        女,        保密    }        //这张表用来关联角色和权限     /// <summary>    /// 角色权限    /// </summary>    [Table("Role_Permission")]    public class Role_Permission    {        [Key]        public int Id { get; set; }        public int RoleId { get; set; }        public int PermissionId { get; set; }    }        //用户和角色表  用来关联用户和角色     [Table("User_Role")]    public class User_Role    {        [Key]        public int Id { get; set; }        public int UserId { get; set; }        public int RoleId { get; set; }    }                

二、写接口

根据用户id显示权限的接口

//这个是权限管理的接口和实现    使用的是依赖注入的方式public interface IPermissionResposITory    {        //这里的dto是实现左侧菜单的递归实现        List<;menoDto> GetPermissions(int userId);    }         public class PermissionRespository : IPermissionRespository    {        PRivate readonly AppDbContext appDbContext;        public PermissionRespository(AppDbContext appDbContext)        {            this.appDbContext = appDbContext;        }                    //根据用户id查询权限显示左侧列表        public List<MenoDto> GetPermissions(int userId)        {            //先查询最高级的数据  然后一次查询子集            //if(userId == 1)  return GetMenus(this.appDbContext.permissions.ToList(), "M");            //使用ling语句实现三表联查 最后显示权限信息                      VAR menus = (From a in this.appDbContext.user_roles                         join b in this.appDbContext.role_Permissions                         on a.RoleId equals b.RoleId                         join c in this.appDbContext.permissions                        on b.PermissionId equals c.Id                        where a.UserId == userId                        select new Permission                        {                            Id = c.Id,                           Enable = c.Enable,                           ParentCode = c.ParentCode,                            PermissionName = c.PermissionName,                           PermissionCode = c.PermissionCode,                           PermissionIco = c.PermissionIco                       }).ToList();            var list = GetMenus(menus, "M");            return list;​        }                //使用递归查询左侧菜单        public List<MenoDto> GetMenus(List<Permission> list,string permissionCode)        {             List<MenoDto> menus = new List<MenoDto>();            foreach (var item in list.Where(u=>u.PermissionCode == permissionCode))            {                var menu = new MenoDto();                menu.Id = item.Id;                menu.PermissionName = item.PermissionName;                menu.PermissionCode =item.PermissionCode;                menu.PermissionUrl = item.PermissionUrl;                menu.PermissionIco = item.PermissionIco;                menu.Enable = item.Enable;                menu.ParentCode = item.ParentCode;                menu.menoDtos = GetMenus(list, item.ParentCode);                menus.Add(menu);            }            return menus;        }    }        

角色接口及实现

//角色接口 public interface IRoleRespository    {               ApiResultData GetRole();  //显示角色全部信息  返回的是自己封装的api规范        int AddRole(Role role);        /// <summary>        /// 添加角色和权限关系表        /// </summary>        /// <param name="roleId"></param>        /// <param name=""></param>        /// <returns></returns>        int AddRole_Permission(int? roleId,string permissionIds);        ApiResultData GetRole_Permission(int roleId);        Role GetRole(int id);    }            //接口实现    public class RoleRespository : IRoleRespository    {        private readonly AppDbContext appDbContext;        public RoleRespository(AppDbContext appDbContext)        {            this.appDbContext = appDbContext;        }        //添加角色信息        public int AddRole(Role role)        {            this.appDbContext.roles.Add(role);            return this.appDbContext.SaveChanges();        }                //添加角色的权限  实现一对多   一个角色可以有多个权限        public int AddRole_Permission(int? roleId, string permissionIds)        {            try            {            //判断角色id是否为空                if (roleId == null||string.IsNullOrEmpty(permissionIds)) return 0;                //如果不为空删除角色全部权限                  appDbContext.role_Permissions.RemoveRange(appDbContext.role_Permissions.Where(u=>u.RoleId == roleId));                //这里从新添加角色权限                  foreach (var item in permissionIds.Split(','))                {                    Role_Permission role_Permission = new Role_Permission();                    role_Permission.RoleId = (int)roleId;                    role_Permission.PermissionId = Convert.ToInt32(item);                    appDbContext.role_Permissions.Add(role_Permission);                }                return this.appDbContext.SaveChanges();            }            catch (Exception)            {​                throw;            }                    }​        //获取角色全部信息        public ApiResultData GetRole()        {​            return new ApiResultData { Data = this.appDbContext.roles.ToList()};        }​        //查询角色单个实体        public Role GetRole(int id)        {            var role = this.appDbContext.roles.Find(id);            return role;        }                //通过角色id 查找对应的权限id        public ApiResultData GetRole_Permission(int roleId)        {            return new ApiResultData            {                Data = appDbContext.role_Permissions.Where(u => u.RoleId == roleId            ).Select(u => u.PermissionId)            };        }    }

用户信息的接口及实现

 public interface IUserRespository    {        bool AddUser(User user);  //添加用户信息        ApiResultData GetUserAll(); //获取所有用户信息        ApiResult Login(User user); //登陆    }        //实现接口    public class UserRespository : IUserRespository    {        private readonly AppDbContext appDbContext;        public UserRespository(AppDbContext appDbContext)        {            this.appDbContext = appDbContext;        }        //添加角色信息        public bool AddUser(User user)        {        //这里开启事务  因为需要操作两张表添加数据            using var begin = this.appDbContext.Database.BeginTransaction();            try            {                //这里添加用户信息  密码采用MD5加密方式  底下有代码                user.Password = Md5Helper.encrypt(user.Password);                this.appDbContext.users.Add(user);                this.appDbContext.SaveChanges();                                //添加角色和用户关联的表                foreach (var item in user.RoleIds.Split(','))  //这里需要分割角色id 因为是多个id                {                    User_Role user_Role = new User_Role();                    user_Role.UserId = user.Id;                    user_Role.RoleId = Convert.ToInt32(item);  //这里需要把字符串id 转为数字类型                    this.appDbContext.user_roles.Add(user_Role);                }                this.appDbContext.SaveChanges();                begin.COMmit();  //关闭事务                return true;            }            catch (Exception)            {                begin.Rollback();  //回滚  如果有一张表操作失败  两个添加都不会执行                return false;            }        }                //获取用户的全部信息        public ApiResultData GetUserAll()        {            return new ApiResultData { Data = this.appDbContext.users.ToList()};        }                //实现登陆信息        public ApiResult LOGin(User user)        {        //通过 MD5对要登录的密码加密  然后从数据库查询账号密码            user.Password = Md5Helper.encrypt(user.Password);            User userInfor = this.appDbContext.users.FirstOrDefault(u=>u.UserName==user.UserName&&u.Password == user.Password);            if (userInfor == null) return new ApiResult { Code =ResponseCode.Fail , Data = userInfor, Message =GetEnumDescription.GetDescription(ResponseCode.Fail) };   //这里使用的返回类型是封装好的apiresult             return new ApiResult { Code = ResponseCode.Success, Data = userInfor,Message= GetEnumDescription.GetDescription(ResponseCode.Success) };        }    }

返回的apiresult MD5加密方式 还有DTO

 //MD5加密方式 public static class Md5Helper    {        /// <summary>        /// MD5加密(32位)        /// </summary>        /// <param name="str">加密字符</param>        /// <returns></returns>        public static string encrypt(string str)        {            string cl = str;            string pwd = "";            MD5 md5 = MD5.Create();            byte[] s = md5.ComputeHash(Encoding.UTF8.GetBytes(cl));            for (int i = 0; i < s.Length; i++)            {                pwd = pwd + s[i].ToString("X");            }            return pwd;        }    }    //apiresult 接口返回的规范     public class ApiResult    {        public ResponseCode Code { get; set; }  //状态码   类型是枚举        public string Message { get; set; } =string.Empty;        public dynamic Data { get; set; }        public bool Success =>Code== ResponseCode.Success;   //这里是返回成功的状态    }    //左侧菜单返回的dto    public class MenoDto    {        public int Id { get; set; }        public string PermissionCode { get; set; }        public string PermissionName { get; set; }        public string PermissionIco { get; set; }        public string PermissionUrl { get; set; }        public bool Enable { get; set; } = true;        public string ParentCode { get; set; }        public List<MenoDto> menoDtos { get; set; }    }    //枚举类型  返回的状态码     // <summary>    /// 响应code枚举    /// </summary>    public enum ResponseCode    {        [Description("通用错误码")]        Fail = -1,        [Description("登录成功")]        Success = 200,        [Description("登录失败")]        LoginFail = 201,//  登录失败        /// <summary>        /// 未授权，需要重新登录        /// </summary>        [Description("未授权")]        Unauthorized = 401,        /// <summary>        /// 未授权，不需要重新登录，无权限操作        /// </summary>        [Description("未授权")]        Unauthorized1 = 1000, //未授权        [Description("未知异常")]        UnknownEx = 500, //未知异常标识        [Description("数据库异常")]        DbEx = 999, //数据库操作异常        [Description("数据为空")]        DataIsNull = 1002, //数据为空        [Description("数据格式错误")]        DataForMATError = 1003, //数据格式错误        [Description("数据错误")]        DataTypeError = 1004, //数据类型错误        [Description("数据验证失败")]        RequestDataVerifyFail = 1005, //请求数据验证失败        [Description("数据错误")]        UnityDataError = 1006, //统一数据处理错误码    }    //这个类是返回apiresult的时候  获取枚举的值        public static class GetEnumDescription    {        /// <summary>        /// 获取枚举的描述        /// </summary>        /// <param name="en"></param>        /// <returns></returns>        public static string GetDescription(Enum en)        {            //反射  获取枚举的类型            Type type = en.GetType();            //获取所有的成员              var members = type.GetMember(en.ToString());            if (members!=null && members.Length>0)            {                var desc = members[0].GetCustomAttributes(typeof(DescriptionAttribute),false);                if (desc!=null&&desc.Length>0)                {                    return (desc[0] as DescriptionAttribute).Description;                }            }            return type.ToString();        }    }

控制器实现角色api 用户api 权限api

//权限api[Route("api/[controller]/[action]")]    [ApiController]    [Authorize]   //这里使用了JWT    public class PermissionController : ControllerBase    {    //依赖注入  使用权限的接口  还有redis的接口        private readonly IPermissionRespository permissionRespository;        private readonly IDistributedCache distributedCache;        public PermissionController(IPermissionRespository permissionRespository,            IDistributedCache distributedCache            )        {            this.permissionRespository = permissionRespository;            this.distributedCache = distributedCache;        }​        //通过角色id获取权限        [HttpGet]        public IActionResult GetPermission(int userId)        {            //这里的key是角色的id            var key = $"userId_{userId}_menu";            //查询redis是否存入信息            var value = this.distributedCache.GetString(key);            if (string.IsNullOrEmpty(value))            {                //访问数据库                var list = this.permissionRespository.GetPermissions(userId);                this.distributedCache.SetString(key,                    JsonConvert.SerializeObject(list), new                    DistributedCacheEntryOptions().SetSlidingExpiration(System.TimeSpan.FromSeconds(6))                    ); //写入redis数据库   这里需要序列化为字符串             }            //从redis里面取的数据需要反序列化为list集合            var result = JsonConvert.DeserializeObject<dynamic>(this.distributedCache.GetString(key));            return Ok(result);        }    }            //用户api     [Route("api/[controller]/[action]")]    [ApiController]    public class UserController : ControllerBase    {        //依赖注入  角色接口  还有jwt鉴权 登陆成功返回token码 然后通过token码访问api接口        private readonly IUserRespository userRespository;        private readonly JwtToken jwtToken;        public UserController(IUserRespository userRespository, JwtToken jwtToken = null)        {            this.userRespository = userRespository;            this.jwtToken = jwtToken;        }                [HttpPost]        public IActionResult AddUser(User user)        {            return Ok(this.userRespository.AddUser(user));        }​        [HttpGet]        public IActionResult GetUser()        {            return Ok(this.userRespository.GetUserAll());        }​        [HttpPost]        [AllowAnonymous]        public IActionResult Login(User user)        {            var userInfor = this.userRespository.Login(user);            if (userInfor.Success)  //判断是否登陆成功            {                User entity = userInfor.Data as User;                var token = jwtToken.GenerateToken(entity.UserName);                //JWT验证码存入响应头  前端登陆需要从头部获取token码                HttpContext.Response.Headers["token"] = token;                HttpContext.Response.Headers["Access-Control-Expose-Headers"] = "token";                return Ok(userInfor);            }            return BadRequest(userInfor); //状态码400        }    }        //角色api        [Route("api/[controller]/[action]")]    [ApiController]    public class RoleController : ControllerBase    {        private readonly IRoleRespository roleRespository;        public RoleController(IRoleRespository roleRespository)        {            this.roleRespository = roleRespository;        }​        [HttpGet]        public IActionResult GetRole(int id)        {            var role = this.roleRespository.GetRole(id);            return Ok(role);        }​        [HttpGet]        public IActionResult GetRoleList([FromServices] IMapper mapper)        {            var role = this.roleRespository.GetRole();            return Ok(role);        }​​        [HttpPost]        public IActionResult AddRole(Role role)        {            return Ok(this.roleRespository.AddRole(role));        }​        [HttpPost]        public IActionResult AddRolePermission(int roleId,string permissionIds)        {            return Ok(roleRespository.AddRole_Permission(roleId,permissionIds));        }​        [HttpGet]        public IActionResult GetRoleIdByPermissoins(int roleId)        {            var role = roleRespository.GetRole_Permission(roleId);            return Ok(role);        }​    }

三、鉴权授权 ---JWT

授权的功能类 -----登陆功能用的这个 可以看用户api

 public class JwtToken    {        public Iconfiguration Configuration { get; }        public JwtToken(IConfiguration configuration)        {            this.Configuration = configuration;        }        /// <summary>        /// 生产令牌        /// </summary>        /// <param name="userName">用户名</param>        /// <param name="expireMinutes">过期时间</param>        /// <returns></returns>        public string GenerateToken(string userName,int expireMinutes=30)        {                        //获取发生人            var issuer = Configuration.GetSection("JwtSettings:Issuer").Value;            //获取的是密钥            var signKey = Configuration.GetSection("JwtSettings:SignKey").Value;            //上边两条数据从配置文件读取  在下面            var claims = new List<Claim>();            //添加主题            claims.Add(new Claim(JwtRegisteredClaimnames.Sub, issuer));            claims.Add(new Claim(JwtRegisteredClaimNames.Jti, userName));​            //添加角色信息            claims.Add(new Claim("Role", "User"));            claims.Add(new Claim("userId", "Admin"));​            var userClaimsIdentity = new ClaimsIdentity(claims);            //根据signKey 得到加密之后的key            var securityKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(signKey));            //加密方式            var signingCredentials = new SigningCredentials(securityKey, SecurityAlgorithms.HmacSha256Signature);​            // 建立 SecurityTokenDescriptor            var tokenDescriptor = new SecurityTokenDescriptor            {                Issuer = issuer,                //Audience = issuer, // 由於你的 API 受眾通常沒有區分特別對象，因此通常不太需要設定，也不太需要驗證                //NotBefore = DateTime.Now, // 預設值就是 DateTime.Now                //IssuedAt = DateTime.Now, // 預設值就是 DateTime.Now                Subject = userClaimsIdentity,                Expires = DateTime.Now.AddMinutes(expireMinutes),                SigningCredentials = signingCredentials            };​            // 產出所需要的 JWT securityToken 物件，並取得序列化後的 Token 結果(字串格式)            var tokenHandler = new JwtSecurityTokenHandler();            var securityToken = tokenHandler.CreateToken(tokenDescriptor);            var serializeToken = tokenHandler.WriteToken(securityToken);​            return serializeToken;​​        }    }        //配置文件    "RedisConnectionStrings": "127.0.0.1:6379,password=,defaultDatabase=0,connectTimeout=5000,syncTimeout=1000",  //这里是连接redis的字符串  "JwtSettings": {    "Issuer": "JwtAuthDemo",  //发行人    "SignKey": "abcDEfosAODIOJGOIEJf2902SJDFOISDJGOIJOIJ" //长度大于16个字符以上的字符串  //私钥  }

四、最重要的Startup类 完成接口的依赖注入 还有鉴权授权

public void ConfigureServices(IServiceCollection services)        {            services.AddSwaggerGen(c =>            {                c.SwaggerDoc("v1", new OpenApiInfo { Title = "Week2", Version = "v1" });                #region 开启Swagger认证   这里实现的是api界面有一个验证token码的窗口  需要输入token码才能访问接口                c.AddSecurityDefinition("Bearer", new OpenApiSecurityScheme()                {​                    Description = "在下框中输入请求头中需要添加Jwt授权Token：Bearer Token",                    Name = "Authorization",                    In = ParameterLocation.Header,                    Type = SecuritySchemeType.ApiKey,                    BearerFormat = "JWT",                    Scheme = "Bearer"                });​                c.AddSecurityRequirement(new OpenApiSecurityRequirement                {                    {                        new OpenApiSecurityScheme                        {                            Reference = new OpenApiReference {                                Type = ReferenceType.SecurityScheme,                                Id = "Bearer"                            }                        },                        new string[] { }                    }                });                #endregion            });            //实现依赖注入            services.AddScoped<IPermissionRespository, PermissionRespository>();            services.AddScoped<IUserRespository, UserRespository>();            services.AddScoped<IRoleRespository, RoleRespository>();            services.AddSingleton<JwtToken>();            //配置Redis            services.AddStackExchangeRedisCache(options =>            {                options.Configuration = Configuration.GetSection("RedisConnectionStrings").Value;                //options.InstanceName = "SampleInstance";            });            //jwp鉴权            services            .AddAuthentication(JwtBearerdefaults.AuthenticationScheme)            .AddJwtBearer(options =>            {                // 當驗證失敗時，回應標頭會包含 WWW-Authenticate 標頭，這裡會顯示失敗的詳細錯誤原因                options.IncludeErrorDetails = true; // 預設值為 true，有時會特別關閉​                options.TokenvalidationParameters = new TokenValidationParameters                {                    // 透過這項宣告，就可以從 "sub" 取值並設定給 User.Identity.Name                    NameClaimType = "http://schemas.XMlSOAp.org/ws/2005/05/identity/claims/nameidentifier",                    // 透過這項宣告，就可以從 "roles" 取值，並可讓 [Authorize] 判斷角色                    RoleClaimType = "http://schemas.microsoft.com/ws/2008/06/identity/claims/role",​                    // 一般我們都會驗證 Issuer                    ValidateIssuer = true,                    ValidIssuer = Configuration.GetValue<string>("JwtSettings:Issuer"),​                    // 通常不太需要驗證 Audience                    ValidateAudience = false,                    //ValidAudience = "JwtAuthDemo", // 不驗證就不需要填寫​                    // 一般我們都會驗證 Token 的有效期間                    ValidateLifetime = true,​                    // 如果 Token 中包含 key 才需要驗證，一般都只有簽章而已                    ValidateIssuerSigningKey = false,​                    // "1234567890123456" 應該從 IConfiguration 取得                    IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(Configuration.GetValue<string>("JwtSettings:SignKey")))                };            });        }                        //中间件需要添加         //鉴权            app.UseAuthentication();            //授权            app.UseAuthorization();

五、项目使用的nuget包如下

Microsoft.AspNetCore.Authentication.JwtBearer (5.0.16)  //jwt鉴权Microsoft.EntityFrameworkCore(5.0.16)Microsoft.EntityFrameworkCore.Design (5.0.16)Microsoft.EntityFrameworkCore.SQLServer (5.0.16)Microsoft.EntityFrameworkCore.Tools (5.0.16)Microsoft.extensions.Caching.StackExchangeRedis (5.0.1)  //redis缓存Swashbuckle.AspNetCore (5.6.3)

六、前端vue

 

1.路由的配置

const routes = [  {    path: '/',    name: 'home',    redirect:'/login',  //重定向登陆页面为初始化    component: Home,    children:[  //导航页面的子集         {            path: 'system/user', //跳转到用户页面            name: 'User',            // route level code-splitting            // this generates a separate chunk (about.[hash].js) for this route            // which is lazy-loaded when the route is visited.            component: () => import(/* webpackChunkName: "about" */ '../views/system/User.vue')         },          {            path: 'system/role',  //跳转到角色页面            name: 'Role',            // route level code-splitting            // this generates a separate chunk (about.[hash].js) for this route            // which is lazy-loaded when the route is visited.            component: () => import(/* webpackChunkName: "about" */ '../views/system/Role.vue')         },         {            path: 'system/permission',  //跳转到权限的页面            name: 'Permission',            // route level code-splitting            // this generates a separate chunk (about.[hash].js) for this route            // which is lazy-loaded when the route is visited.            component: () => import(/* webpackChunkName: "about" */ '../views/system/Permission.vue')         }    ]  },  {    path: '/login',    name: 'Login',    // route level code-splitting    // this generates a separate chunk (about.[hash].js) for this route    // which is lazy-loaded when the route is visited.    component: () => import(/* webpackChunkName: "about" */ '../views/Login.vue')  }]//路由守卫  判断token码是否为空  如果空跳转到登陆页面router.beforeEach((to,form,next)=>{//判断你要进入的是登陆页面，正常执行if(to.path=='/login')next();else{    let token = sessionStorage.getItem('token');    if(token==null||token == '') next('/login');    next();    }})

封装axios的请求

//axios 又封装了一层import axios  from "axios"  //导入axios//创建axios 起个名$httpconst $http = axios.create({    baseURL:'http://localhost:56405/',    timeout:7000 //默认超时时间 1000毫秒 等1秒})//vue 请求拦截$http.interceptors.request.use(config=>{    //获取token 信息    let token = sessionStorage.getItem('token')    if(token){        //把请求带上头部信息 再请求api        config.headers.Authorization = 'Bearer ' +token    }    return config})//导出 将当前$http 供外部使用export default $http

左侧菜单递归实现

<template>  <div class="page">    <el-container>      <el-header>八位用户权限管理系统 <el-button type="danger" @click="quit">退出</el-button>      </el-header>      <el-container>        <el-aside width="200px">          <menu-tree :menuData="this.menus"></menu-tree>   //实现父给子组件传值        </el-aside>        <el-main>          <router-view></router-view>        </el-main>      </el-container>    </el-container>  </div></template><script>import MenuTree from "@/components/MenuTree.vue"export default  {    name: 'aHome',    data () {      return {        menus: []      }    },    components: { MenuTree },  //显示子组件信息    methods: {      menu () {        var userId = sessionStorage.getItem('userId')        this.$http.get(`/api/Permission/GetPermission?userId=${userId}`).then(res => {          this.menus = res.data          console.log(res.data)          //   res.data = this.option(o => {          //     this.opens.push(o.Id)          //   })          //   console.log(res.data)        })      }    },    created () {      this.menu()    }  }</script>//子组件递归实现左侧菜单展示<template>  <div class="page">    <el-menu default-active="2" class="el-menu-vertical-demo" :default-openeds=opens router background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">      <template v-for="item in this.menuData">        <el-submenu v-if="item.menoDtos.length>0" :index="item.Id.toString()" :key="item.Id">          <template slot="title">    //循环一级导航  判断一级菜单是否大于零  是的话显示一级菜单            <i :class="item.PermissionIco"></i>            <span>{{item.PermissionName}}</span>          </template>          <MenuTree :menuData="item.menoDtos"></MenuTree>  //循环调用此组件实现递归        </el-submenu>//如果一级导航的子节点有数据则显示        <el-menu-item v-else :key="item.menoDtos.Id" :index="item.PermissionUrl">          <template slot="title"> <i :class="item.PermissionIco"></i><span>{{item.PermissionName}}</span></template>        </el-menu-item>      </template>    </el-menu>  </div></template>//组件接收父组件的传值<script>export default {  name: 'MenuTree',  data () {    return {      opens: ['1']  //默认index = 1为展开方式    }  }, props: ['menuData'], //接收父组件的数据}

查看角色的权限以及给角色分配权限

//这里面只是script的methods方法的代码    页面布局直接element托组件 methods: {    upd (index, row) {      this.dialogFormVisible1 = true  //关闭模态框      this.RoleName = row.RoleName      this.roleId = row.Id       this.$refs.tree.setCheckedKeys([])   //清空节点的信息  通过角色id查询权限的节点      this.$http.get(`/api/Role/GetRoleIdByPermissoins?roleId=${this.roleId}`).then(res => {        res.data.Data.forEach(e => {          let node = this.$refs.tree.getNode(e)  //循环给节点赋值          //判断是否为叶子节点          if (node.isLeaf) {            this.$refs.tree.setChecked(node, true)          }          console.log(res.data.Data)        });      })    },    addPermission () {      let chk = this.$refs.tree.getCheckedKeys()        let half = this.$refs.tree.getHalfcheckedKeys() //这两个方法获取节点的id  如果只选择子节点  会自动勾选父节点      this.permissionIds = chk.concat(half)  //这个方法把获取的两个节点信息拼接成数组      //分配权限      this.$http.post(`/api/Role/AddRolePermission?   roleId=${this.roleId}&permissionIds=${this.permissionIds.toString()}`).then(res => {        if (res.data > 0) {          this.$message.success('权限设置成功')          this.dialogFormVisible1 = false        } else {          this.$message.error('权限设置失败')        }      })    },    //显示角色信息     load () {      this.$http.get(`/api/Role/GetRole`).then(res => {        this.tableData = res.data.Data      })    },    //通过角色id查询权限    getPermission () {      var userId = sessionStorage.getItem('userId')      this.$http.get(`/api/Permission/GetPermission?userId=${userId}`).then(res => {        this.data = res.data        console.log(res.data)        //   res.data = this.option(o => {        //     this.opens.push(o.Id)        //   })        //   console.log(res.data)      })    }  }

还有重要的一点就是登陆成功的时候向头部heads添加token码 然后给api授权访问

 Login () {      this.$http.post(`/api/User/Login`, this.ruleForm).then(res => {        if (res.data.Code == 200) {          this.$message.success(res.data.Message)          sessionStorage.setItem('userId', res.data.Data.Id);          //获取请求头的信息          sessionStorage.setItem("token", res.headers.token);  //这里是获取的token码          this.$router.push('system/role')        } else {          this.$message.error(res.data.Message)        }      })    }

脚本宝典总结

以上是脚本宝典为你收集整理的.net core webapi + vue 实现RBAC 基本的权限管理全部内容，希望文章能够帮你解决.net core webapi + vue 实现RBAC 基本的权限管理所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。