vue 设置路由的登陆权限的点子

index.js

store/modules/lo

//main.js
 mounted () {
 // 调用方法,动态生成路由
 util.initRouter(this);
 }

你可能感兴趣的篇章:

  • vue动态路由完结多元嵌套面包屑的思绪与办法
  • 详解vue-router贰.0动态路由获得参数
  • 澳门新萄京8522,vue用addRoutes实现动态路由的身体力行

main.js

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

iview-admin项目将路由分为二种:

幸存的老品种将稳步向用户基本转移,而在此以前的新品类须要去这几个用户主旨得到登录音讯。具体的兑现是:

澳门新萄京8522 1

项目协会

<template>
 <div>
  <h1>page1</h1>
  <Button v-hasPermission="'add'">添加</Button>
  <Button v-hasPermission="'edit'">修改</Button>
  <Button v-hasPermission="'del'">删除</Button>
 </div>
</template>

route.js文件如下:

将索要登陆权限的路由设置meta属性

vue-cil 脚手架开端化项目后,小编只修改过src文件夹

  • 不作为Main组件的子页面体现的页面路由,比如login、40四、40三等悖谬页面路由;
  • 用作Main组件的子页面显示然而不在左侧菜单展现的路由 otherRouter
    ,譬喻首页路由;
  • 用作Main组件的子页面体现并且在左侧菜单呈现的路由 appRouter ;

登陆新品类b.exaplem.com通过session检查实验到未登入时(这里说下新的类型和老项目在同一个一流域归属),跳转到a.exaplem.com?returnUrl=’b.exaplem.com’,在a.exaplem.com下成功登入后生成一个ticket给到b.exaplem.com,b.exaplem.com将那个ticket存在session里面来有限支撑登6状态。

meta:{requireAuth:true}, 

此项目拿去 捋清楚 vue+vuex+vue-router
的涉及是没难点的,这足以说的特等轻便的本子,适合初学。上面的原委说的关键,其实也总算项目标总体呐

本项指标笔触来源见仿照效法博文,原博主的求实思路是:在路由组织的meta字段中,增多用户操作权限列表,然后注册全局指令,当节点初次渲染时,判定该页面是还是不是存在权限,若是存在,并且传入的参数不在权限列表中,则一向删除该节点。

因为大家的类型不容许到达同等的意况,接纳适合自身项指标缓慢解决方案才是最着重的,不要为了用某些技能而去用某些手艺。

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限
    if (sessionStorage.getItem("access_token")) { // 判断当前的token是否存在
      next();
    }
    else {
      next({
      path: '/manage',
      query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该路由
    })
    }
  }
  else {
    next();
  }
});

gin.js  actions部分

总结

在用户token和权力都有的景况下,进入本人权力内的页面并且带领token访问后台举行互动。

以上所述是笔者给我们介绍的vue
设置路由的记名权限的格局,希望对大家享有支持,假若大家有其它疑问请给自家留言,笔者会及时回复大家的。在此也特别感激大家对台本之家网址的支撑!

共多个剧中人物:adan barbara carrie 密码全部都以:123456

github上有关vue动态增多路由的例子多数,本项目参谋了有的项目后,在iview框架基础上到位了动态路由的动态增进和菜单刷新。为了扶持别的供给的朋友,现分享出完毕逻辑,接待一同交换学习。

假设用户已经有了token,那么再作证是还是不是有用户消息,倘使未有去乞请用户音信的接口,后台读取用户的中坚音信重返给前端,前端依照后台再次来到的用户权限生成固定的路由表用于页面拦截。

您只怕感兴趣的文章:

  • vue-router路由懒加载和权杖决定详解
  • vue
    addRoutes达成动态权限路由菜单的示范
  • vue
    iview完成动态路由和权力验证成效
  • vue vuex
    vue-rouert后台项目——权限路由(适合初学)
  • 至于Vue的路由权力管理的示范代码
  • vue权限路由达成的艺术言传身教总计
webpack ---- 打包神器
vue ---- JavaScript 框架
vuex ---- 实现不同组件间的状态共享
vue-router ---- 页面路由
babel-polyfill ---- 将ES6代码转为ES5代码
normalize.css ---- 重置掉该重置的样式
element-ui ---- UI组件库
//hasPermission.js 

const hasPermission = {
 install (Vue, options) {
  Vue.directive('hasPermission', {
   bind (el, binding, vnode) {
    let permissionList = vnode.context.$route.meta.permission;
    if (permissionList && permissionList.length && !permissionList.includes(binding.value)) {
     el.parentNode.removeChild(el);
    }
   }
  });
 }
};
export default hasPermission;

因为今后基本上是首先登场入a.exaplem.com然后再去登入b.exaplem.com,所以当大家先是次跻身b.exaplem.com系统时,b.exaplem.com会向a.exaplem.com系统一发布送请求来博取ticket,并且生成session来维持登入状态。

在main.js内一向写对路由的辨证

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);
 });
 },

页面标签和面包屑导航

二: 讨论

总结

// 初始化路由
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'}}
 ]
 }
];
// main.js
import hasPermission from '@/libs/hasPermission.js';
Vue.use(hasPermission);

先是前端从cookie获取token,假如未有token就跳转到登入页面签到,登六验证之后生成token存在数据库中并赶回给前端;前端将那一个token保存下去,为了让在浏览器新的tab页时不需求报到,大家前端须要将那么些token保存到cookie之中。

上述所述是笔者给大家介绍的vue vuex
vue-rouert后台项目——权限路由(适合初学),希望对大家具有援救,如若大家有别的疑问请给自己留言,小编会及时还原大家的。在此也非常感激大家对剧本之家网址的协助!

内需非常注意的是,假使40四页面为静态路由,那么首先次跻身页面时,那时动态路由还未加载,找不到路由地址会暗中同意跳转到404错误页,体验很差,所以40四路由先不写入路由规则中,和动态路由一同加载。

出于集团的等级次序越来越的纷纭,属于基于原来的类别开采新的连串模块,不过这一个模块又为了现在主体功效的翻新后一次迭代须要保障相对的独立性,猜测以往的老系统只起叁个用户大旨的机能,所未来后是依赖完毕单点登6的技巧去迭代革新以后的新的项目。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图