laravel结合vue添加权限的实现示例
目录
- 一、添加（权限）节点
- 1.1、引入vue
- 1.2、添加模版（vue、jquery）
- 1.3、添加节点控制器逻辑
- 1.4、模型中定义修改器
- 1.5、效果：
一、添加（权限）节点
1.1、引入vue
使用vue进行界面管理，实现添加功能
我们在这个目录下存入vue.js:
1.2、添加模版（vue、jquery）
resources/admin/node/create.blade.php：
<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="Bookmark" href="/favicon.ico">
<link rel="Shortcut Icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" href="/admin/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="/admin/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/css/style.css" />
<title>添加节点</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont"></i> 首页 <span class="c-gray en">></span> 用户中心 <span class="c-gray en">></span> 添加节点 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont"></i></a></nav>
<article class="page-container">
<!-- 表单验证 -->
@include('admin.common.validate')
<form action="{{route('admin.node.store')}}" method="post" class="form form-horizontal" @submit.prevent="dopost">
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>是否顶级：</label>
<div class="formControls col-xs-8 col-sm-9"> <span class="select-box">
<select name="pid" class="select" @change="changePid">
<option :value="info.pid">顶级</option>
@foreach($data as $item)
<option value="{{$item -> id}}">{{$item -> name}}</option>
@endforeach
</select>
</span>
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>节点名称：</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="text" v-model.lazy="info.name" class="input-text" placeholder="节点名称" name="name">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3">路由别名：</label>
<div class="formControls col-xs-8 col-sm-9">
<input class="input-text" v-model.lazy="info.route_name" placeholder="路由别名" name="route_name">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>是否菜单：</label>
<div class="formControls col-xs-8 col-sm-9 skin-minimal">
<div class="radio-box">
<input type="radio" v-model="info.is_menu" value="1">
<label for="sex-1">是</label>
</div>
<div class="radio-box">
<input type="radio" v-model="info.is_menu" value="0">
<label for="sex-2">否</label>
</div>
</div>
</div>
<div class="row cl">
<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
<input class="btn btn-primary radius" type="submit" value="添加节点">
</div>
</div>
</form>
</article>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="/admin/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/admin/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="/admin/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="/admin/static/h-ui.admin/js/H-ui.admin.js"></script>
<!--/_footer 作为公共模版分离出去-->
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/admin/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<!-- vue -->
<script src="/js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '.page-container',
data: {
info: {
_token: "{{csrf_token()}}",
pid: 0,
name: '',
route_name: '',
is_menu: 0,
}
},
methods: {
// dopost (e) {
// let url = e.target.action
// $.post(url, this.info).then((res) => {
// console.log(res);
// })
// }
async dopost (e) {
let url = e.target.action
let res = await $.post(url, this.info)
if (res.status == 1) {
location.href ="{{route('admin.node.index')}}"
}
else {
layer.msg(res.msg,{icon: 2, time:1000});
}
},
changePid (e) {
let pid = e.target.value || 0;
this.info.pid = pid;
}
},
mounted() {
}
})
</script>
</body>
</html>
1.3、添加节点控制器逻辑
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
// 异常处理
try {
// 后台验证
$this -> validate($request, [
'name' => 'required|unique:roles,name'
]);
}
catch (Exception $e) {
return ['status' => 20002, 'msg' => '验证不通过！'];
}
// 入库
Node::create($request -> except('_token'));
return ['status' => 1, 'msg' => '添加节点成功！'];
}
1.4、模型中定义修改器
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class Node extends Base
{
// 模型中定义修改器 设置route_name 可以为null 方法名set+字段名驼峰式
public function setRouteNameAttribute($value)
{
// 如果字段值为null，则设置为空字符串，修改和添加时生效 store 或 update
$this->attributes['route_name'] = empty($value) ? '' : $value;
}
}
1.5、效果：
到此这篇关于laravel结合vue添加权限的实现示例的文章就介绍到这了,更多相关laravel vue添加权限内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
Laravel框架实现的rbac权限管理操作示例
本文实例讲述了Laravel框架实现的rbac权限管理操作.分享给大家供大家参考,具体如下: 介绍:根据不同的权限,在菜单栏显示不同的功能,只对菜单进行了限制,若对路由也进行限制,请自行完善 1.建表(用户表.角色表.权限表.用户角色表.角色权限表) CREATE TABLE IF NOT EXISTS mr_role ( id int(11) PRIMARY KEY AUTO_INCREMENT COMMENT '自增id', name varchar(30) NOT NULL COMMENT
-
在Laravel5中正确设置文件权限的方法
前言 为任何Web应用程序设置适当的文件权限是Web托管的重要部分. 在本教程中,您将学习如何在Linux Web服务器上托管的Laravel应用程序上正确配置文件权限. 首先,确定运行Web服务器的用户名. 以下是一些默认情况 Linux上的Nginx使用帐户 - www-data Debian系统上的Apache使用account-www-data RedHat系统上的Apache使用帐户 - apache 我们假设我们的Web服务器使用帐户www-data运行. 现在递归更改所有文件和
-
解决laravel中日志权限莫名变成了root的问题
框架用的是laravel, 其中把一些数据写入日志, 保存到storage目录中, 刚开始查看正常, 再过一段时间文件权限就自动变成了root权限了, 导致只有www权限的laravel不能写入日志中 定时任务抓取图片的时候存储不了报权限错误 //=================== 解决方法如下: linux可以指定crontab的用户, 平常crontab -e添加的任务都是在root用户的定时任务下, 如果要用nobody用户执行, 需要使用 crontab -u nobody -l 然
-
laravel利用中间件做防非法登录和权限控制示例
laravel框架的中间件非常好用,使得我们的防非法和rbac可以简单快速的实现 中间件就是控制路由的访问,进行分类并统一管理 1.首先我们打开artisan输入下面的命令行,创建一个中间件文件 php artisan make:middleware AdminLogin 执行命令后我们会发现Middleware文件夹会多出一个AdminLogin文件 2.然后我们打开kernel.php,将这个中间件加入到路由中间件中 protected $routeMiddleware = [ 'auth'
-
Laravel5权限管理方法详解
本文实例讲述了Laravel5权限管理的实现方法.分享给大家供大家参考,具体如下: 关于权限管理的思考 最近用laravel设计后台,后台需要有个权限管理.权限管理实质上分为两个部分,首先是认证,然后是权限.认证部分非常好做,就是管理员登录,记录session.这个laravel中也有自带Auth来实现这个.最麻烦就是权限认证. 权限认证本质上就是谁有权限管理什么东西.这里有两个方面的维度,谁,就是用户维度,在用户维度,权限管理的粒度可以是用户一个人,也可以是将用户分组,如果将用户分组,则涉及到
-
laravel实现简单用户权限的示例代码
关于权限管理的思考 最近用laravel设计后台,后台需要有个权限管理.权限管理实质上分为两个部分,首先是认证,然后是权限.认证部分非常好做,就是管理员登录,记录session.这个laravel中也有自带Auth来实现这个.最麻烦就是权限认证. 权限认证本质上就是谁有权限管理什么东西.这里有两个方面的维度,谁,就是用户维度,在用户维度,权限管理的粒度可以是用户一个人,也可以是将用户分组,如果将用户分组,则涉及到的逻辑是一个用户可以在多个组里面吗?在另外一方面,管理什么东西,这个东西是物的维度,
-
laravel结合vue添加权限的实现示例
目录 一.添加(权限)节点 1.1.引入vue 1.2.添加模版(vue.jquery) 1.3.添加节点控制器逻辑 1.4.模型中定义修改器 1.5.效果: 一.添加(权限)节点 1.1.引入vue 使用vue进行界面管理,实现添加功能 我们在这个目录下存入vue.js: 1.2.添加模版(vue.jquery) resources/admin/node/create.blade.php: <!--_meta 作为公共模版分离出去--> <!DOCTYPE HTML> <h
-
Vue 简单实现前端权限控制的示例
简要说明 最近写了一下vue控制权限(菜单.路由)的项目,用了vuex.addRoutes动态添加路由方法等,总共100多行代码,跟大家分享一下~ 逻辑梳理 除登录接口.退出接口外,其余接口增加token验证. 打开页面时请求获取菜单接口,请求不成功说明未登录,给route默认添加login页面以及 * 重定向. 登录成功后获取到token,把token存入session以及请求头. 登录成功后获取菜单接口,请求回来的路由和vuex里面全部的路由进行匹配,获取component. 把获取完com
-
vue实现菜单权限控制的示例代码
大家在做后台管理系统时一般都会涉及到菜单的权限控制问题.当然解决问题的方法无非两种--前端控制和后端控制.我们公司这边的产品迭代速度较快,所以我们是从前端控制路由迭代到后端控制路由.下面我会分别介绍这两种方法的优缺点以及如何实现(不熟悉vue-router API的同学可以先去官网看一波API哈). 我先简单说下项目的需求:如下图所示,有一级菜单和二级菜单,然后不同的人登录进去会展示不同的菜单. 前端控制路由的思路:将所有的路由映射表都拿到前端来维护,就是我的router.js里面将所有的菜单p
-
vue实现权限控制路由(vue-router 动态添加路由)
用户登录后返回权限菜单,前端根据权限菜单动态添加路由,然后再动态生成菜单栏. 思路如下: 一.定义初始化默认路由. 二.动态配置路由,这里是把所有组件中相应的路由配置成一个个的对象,根据后台返回的菜单tree一个个去匹配. 三.通过匹配,把匹配好的路由数据addRoutes到路由中. 四.为了防止刷新页面后路由数据被清空,这里用判断是否登录的方式,再次加载动态路由. 具体代码如下: router.js import Vue from 'vue' import {router} from './i
-
Springboot+Vue+shiro实现前后端分离、权限控制的示例代码
本文总结自实习中对项目的重构.原先项目采用Springboot+freemarker模版,开发过程中觉得前端逻辑写的实在恶心,后端Controller层还必须返回Freemarker模版的ModelAndView,逐渐有了前后端分离的想法,由于之前,没有接触过,主要参考的还是网上的一些博客教程等,初步完成了前后端分离,在此记录以备查阅. 一.前后端分离思想 前端从后端剥离,形成一个前端工程,前端只利用Json来和后端进行交互,后端不返回页面,只返回Json数据.前后端之间完全通过public A
-
vue路由权限和按钮权限的实现示例
目录 一 菜单路由权限 二 按钮权限的实现 一 菜单路由权限 1.1前端路由配置表 1.2后端数据返回 1.3 拿到数据后存到vuex 1.4 扁平化的目的是为了跳转路由时进行对比权限 //扁平化方法 flatten(data) { return data.reduce((arr,{name,id,resourceType,dimensionTypeCode,btnPermissions,path,children = [],}) => arr.concat([{name,id,resource
-
基于Vue实现后台系统权限控制的示例代码
用Vue/React这类双向绑定框架做后台系统再适合不过,后台系统相比普通前端项目除了数据交互更频繁以外,还有一个特别的需求就是对用户的权限控制,那么如何在一个Vue应用中实现权限控制呢?下面是我的一点经验. 权限控制是什么 在权限的世界里服务端提供的一切都是资源,资源可以由请求方法+请求地址来描述,权限是对特定资源的访问许可,所谓权限控制,也就是确保用户只能访问到被分配的资源.具体的说,前端对资源的访问通常是由界面上的按钮发起,比如删除某条数据:或由用户进入某一个页面发起,比如获取某个列表数据
-
关于Vue的路由权限管理的示例代码
前言 曾经在工作上对 vue 路由权限管理这方面有过研究,这几天又看到了几篇相关的文章,再加上昨天电面中又再一次提及到,就索性整理了一下自己的一些看法,希望对大家有帮助. 实现 大体上实现的思路很简单,先上图: 无非是将路由配置按用户类型分割为 用户路由 和 基本路由,不同的用户类型可能存在不同的 用户路由,具体依赖实际业务. 用户路由: 当前用户所特有的路由 基本路由:所有用户均可以访问的路由 实现控制的方式分两种: 通过vue-router addRoutes方法注入路由实现控制 通过vue
-
Vue 页面权限控制和登陆验证功能的实例代码
页面权限控制 页面权限控制是什么意思呢? 就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访问的页面是不一样的.如果一个页面,有角色越权访问,这时就得做出限制了. Vue 动态添加路由及生成菜单 这是我写过的一篇文章, 通过动态添加路由和菜单来做控制,不能访问的页面不添加到路由表里,这是其中一种办法. 另一种办法就是所有的页面都在路由表里,只是在访问的时候要判断一下角色权限.如果有权限就让访问,没有权限就拒绝,跳转到 404 页面. 思路: 在每一个路由的 meta 属性里,将能
-
Springboot+Spring Security实现前后端分离登录认证及权限控制的示例代码
目录 前言 本文主要的功能 一.准备工作 1.统一错误码枚举 2.统一json返回体 3.返回体构造工具 4.pom 5.配置文件 二.数据库表设计 初始化表数据语句 三.Spring Security核心配置:WebSecurityConfig 四.用户登录认证逻辑:UserDetailsService 1.创建自定义UserDetailsService 2.准备service和dao层方法 五.用户密码加密 六.屏蔽Spring Security默认重定向登录页面以实现前后端分离功能 1.实