项目地址: vue-simple-template
共三个角色:adan barbara carrie 密码全是:123456
adan 拥有 最高权限A 他可以看到 red , yellow 和 blue 页面(共三个页面)
barbara 拥有 权限B 他可以看到 red 和 yellow 页面
carrie 拥有 权限C 他可以看到 red 和 blue 页面
技术栈
webpack ---- 打包神器 vue ---- JavaScript 框架 vuex ---- 实现不同组件间的状态共享 vue-router ---- 页面路由 babel-polyfill ---- 将ES6代码转为ES5代码 normalize.css ---- 重置掉该重置的样式 element-ui ---- UI组件库
项目初始化
# cd 到项目文件夹 cd weven-simple-template # 安装依赖 (本项目还安装了其他依赖详情 请见 package.json 文件) npm install # 运行项目 npm run dev
项目结构
vue-cil 脚手架初始化项目后,我只修改过src文件夹
src ├── App.vue ---- 页面入口 ├── api ---- api请求 │ └── login.js ---- 模拟json对象数据 ├── assets ---- 主题 字体等静态资源 │ └── logo.png ├── components ---- 组件 │ ├── index.vue │ └── login.vue ├── main.js ---- 初始化组件 加载路由 ├── router ---- 路由 │ └── index.js └── store ---- vuex状态管理 ├── getters.js ├── index.js └── modules └── login.js
重点:
动态路由的关键在于router配置的 meta字段 和vuex的 状态共存 (不懂可以先查看官方文档)
router/index.js
// 初始化路由 export default new Router({ routes: [ { path: '/login', name: 'Login', component: Login } ] }); // 动态路由 meta 定义了role export const powerRouter =[ { path: '/',redirect:'/red', name: 'index',component: Index,hidden:false, children: [ { path: '/red', name: 'red', component: red,}, { path: '/yellow', name: 'yellow', component: yellow, meta: {role: 'B'}}, { path: '/blue', name: 'blue', component: blue, meta: {role: 'C'}} ] } ];
store/modules/lo
Logins({ commit }, info){ return new Promise((resolve, reject) => { let data={}; loginByUserInfo.map(function (item) { //获取所以用户信息 if(info.username === item.username || info.pew === item.pew){ commit('SET_USERNAME',item.username); //将username和role进行存储 sessionStorage.setItem('USERNAME', item.username); //存入 session commit('SET_ROLE',item.role); sessionStorage.setItem('ROLE', item.role); return data={username:item.username,introduce:item.introduce}; }else{ return data; } }); resolve(data); }).catch(error => { reject(error); }); }, Roles({ commit }, newrouter){ return new Promise((resolve, reject) => { commit('SET_NEWROUER',newrouter); //存储最新路由 resolve(newrouter); }).catch(error => { reject(error); }); },
gin.js actions部分
Logins({ commit }, info){ return new Promise((resolve, reject) => { let data={}; loginByUserInfo.map(function (item) { //获取所以用户信息 if(info.username === item.username || info.pew === item.pew){ commit('SET_USERNAME',item.username); //将username和role进行存储 sessionStorage.setItem('USERNAME', item.username); //存入 session commit('SET_ROLE',item.role); sessionStorage.setItem('ROLE', item.role); return data={username:item.username,introduce:item.introduce}; }else{ return data; } }); resolve(data); }).catch(error => { reject(error); }); }, Roles({ commit }, newrouter){ return new Promise((resolve, reject) => { commit('SET_NEWROUER',newrouter); //存储最新路由 resolve(newrouter); }).catch(error => { reject(error); }); },
main.js
router.beforeEach((to, from, next) => { if(store.getters.role){ //判断role 是否存在 if(store.getters.newrouter.length !== 0){ next() //resolve 钩子 }else{ let newrouter if (store.getters.role == 'A') { //判断权限 newrouter = powerRouter } else { let newchildren = powerRouter[0].children.filter(route => { if(route.meta){ if(route.meta.role == store.getters.role){ return true } return false }else{ return true } }); newrouter = powerRouter newrouter[0].children = newchildren } router.addRoutes(newrouter) //添加动态路由 store.dispatch('Roles',newrouter).then(res => { next({ ...to }) }).catch(() => { }) } }else{ if (['/login'].indexOf(to.path) !== -1) { next() } else { next('/login') } } })
components/index.vue
// mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性 ...mapGetters([ 'newrouter' ])
此项目拿去 捋清楚 vue+vuex+vue-router 的关系是没问题的,这可以说的超级简单的版本,适合初学。上面的内容说的重点,其实也算是项目的全部啦
项目地址: vue-simple-template
总结
以上所述是小编给大家介绍的vue vuex vue-rouert后台项目——权限路由(适合初学),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!
有没有vue3+ts控制路由权限的项目案例?
权限适配 适配Android7.0权限,需要做以下设置: 在您自己工程的AndroidManifest.xml中添加以下代码。 <provider android:name="android.support.v4.content.FileProvider" android:authorities="${packageName}.fileProvider"
前面我们已经创建了 beego 项目,而且我们也看到它已经运行起来了,那么是如何运行起来的呢?让我们从入口文件先分析起来吧: package main import ( _ "quickstart/routers" "github.com/astaxie/beego" ) func main() { beego.Run() } 我们看到 main 函数是入口函数,但是
我想从API中读取要显示的产品。然后,当我按下其中一个显示的产品时,它应该使用url中的产品ID和要在页面上查看的产品详细信息将我路由到一个组件,以获取有关该产品的详细信息。我在这里读取了API中的数据,并详细显示了产品。 我想通过产品ID添加一个路由链接。如何将详细信息作为其他组件的道具发送?
假设管理员用户admin有一个路由页面/admin是普通用户不能访问的,现在普通用户user通过某种手段使用addRoutes将这个/admin页面添加到了自己的路由列表中,这样也能访问/admin页面了,请问这种情况前端和后端分别应该怎么处理,感觉前端阻止不了这个操作,后端如何限制呢
本文向大家介绍asp.net core项目mvc权限控制:分配权限,包括了asp.net core项目mvc权限控制:分配权限的使用技巧和注意事项,需要的朋友参考一下 前面的文章介绍了如何进行权限控制,即访问控制器或者方法的时候,要求当前用户必须具备特定的权限,但是如何在程序中进行权限的分配呢?下面就介绍下如何利用Microsoft.AspNetCore.Identity.EntityFramew