vue系列之动态路由详解【原创】


Posted in Javascript onSeptember 10, 2017

开题

最近用vue来构建了一个小项目,由于项目是以iframe的形式嵌套在别的项目中的,所以对于登录的验证就比较的麻烦,索性后端大佬们基于现在的问题提出了解决的方案,在看到他们的解决方案之前,我先画了一个比较标准的单系统的解决方案。

本文目录:

一: 设想
二: 讨论
三:实现
四:总结

一: 设想

vue系列之动态路由详解【原创】

简单解释下上图就是:

首先前端从cookie获取token,如果没有token就跳转到登录页面登录,登录验证之后生成token存在数据库中并返回给前端;前端将这个token保存下来,为了让在浏览器新的tab页时不需要登录,我们前端需要将这个token保存到cookie之中。

如果用户已经有了token,那么再验证是否有用户信息,如果没有去请求用户信息的接口,后台读取用户的基本信息返回给前端,前端根据后台返回的用户权限生成固定的路由表用于页面拦截。

在用户token和权限都有的情况下,进入自己权限内的页面并且携带token访问后台进行交互。

用户在退出时,请求后台接口,清除token数据。

二: 讨论

由于公司的项目更加的复杂,属于基于原来的系统开发新的系统模块,但是这些模块又为了以后主体功能的更新下次迭代需要保持相对的独立性,预计以后的老系统只起一个用户中心的功能,所以现在是基于实现单点登录的能力去迭代更新现在的新的项目。

今天上午对于登录的实现进行了相关讨论,由于公司项目保密考虑只是单单做相关的介绍:

现有的老项目将慢慢向用户中心转换,而以前的新项目需要去这个用户中心获取登录信息。具体的实现是:

登录新项目b.exaplem.com通过session检测到未登录时(这里说下新的项目和老项目在同一个一级域名下),跳转到a.exaplem.com?returnUrl='b.exaplem.com',在a.exaplem.com下成功登录后生成一个ticket给到b.exaplem.com,b.exaplem.com将这个ticket存在session里面来保持登录状态。

因为现在基本上是先登录a.exaplem.com然后再去登录b.exaplem.com,所以当我们第一次进入b.exaplem.com系统时,b.exaplem.com会向a.exaplem.com系统发送请求来获取ticket,并且生成session来维持登录状态。

三:实现

当时想通过引入vuex并通过cookie来保存token的状态,但是由于现在的项目还是后端以session的形式来维持用户的登录状态所以还是没有引入vuex。

基本实现如下:

main.js增加引入的permission.js文件如下:

import Vue from 'vue'
import router from './router'
import { asyncRouterMap, constantRouterMap } from './router'
 
function hasPermission(roles, route) { //
 if (route.meta && route.meta.role) {
  return roles.some(role => role === route.meta.role)
 } else {
  return true
 }
}

function filterAsyncRouter(asyncRouterMap, roles) {

 const accessedRouters = asyncRouterMap.filter(route => {
  if (hasPermission(roles, route)) {
   if (route.children && route.children.length) {
    route.children = filterAsyncRouter(route.children, roles)
   }
   return true
  }
  return false
 })

 return accessedRouters
}

// 加载页面之前
router.beforeEach((to, from, next) => {
 NProgress.start() // 开启Progress
 if (to.path == '/ContractAduit/Error') {
  next()
 } else if (!Vue.prototype.hasRoute) {

  Vue.prototype.$ajax.get(Vue.prototype.$api.getModuleHost("用户信息接口地址"), {})
   .then(data => {
    if (data.code == 1000) {
     let menus = data.menu
     let roles = menus.map((menu, index) => {
      return parseInt(menu.url);
     })
     const accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
     router.addRoutes(accessedRouters)
     Vue.prototype.userInfo = {
      id: data.id,
      realname: data.realname
     }
     Vue.prototype.hasRoute = true;
     next({...to })
    } else {
     router.push({ name: 'ErrorPageRouter' });
    }
   })
   .catch(err => console.log(err))
 } else {
  next()
 }
});

route.js文件如下:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export const constantRouterMap = [{
  path: '/404',
  name: 'NoFoundPagetRouter',
  component: require('../views/404.page'),
  meta: {
   title: '404',
  }
 },
 {
  path: '/ContractAduit/NoAccess',
  name: 'NoAccessPageRouter',
  component: require('../views/no-access.page'),
  meta: {
   title: '无权限',
  }
 },
 {
  path: '/ContractAduit/Error',
  name: 'ErrorPageRouter',
  component: require('../views/error.page'),
  meta: {
   title: '内部错误',
  }
 }
]

export default new Router({
 mode: 'history',
 routes: constantRouterMap
})

export const asyncRouterMap = [{ 
  path: '/ContractAduit/Supplier/List',
  name: 'SupplierListPageRouter',
  component: require('../views/supplier/supplier-list.page.vue'),
  meta: {
   title: '某某列表页',
   role: 10001
  }
 },
 ...
 {
  path: '/',
  redirect: '/ContractAduit/Supplier/List',
  hidden: true,
  meta: {
   title: '某某列表页',
   role: 10001
  }
 }, {
  path: '*',
  redirect: '/404',
  hidden: true
 }
]

因为没有引入vuex所以需要在VUE构造函数的原型对象上声明变量来判断是否已经拉取了用户的基本信息,因为我们后端的权限是配置的页面级权限(即不是按照角色来安排哪个前端页面来可访问,而是根据后台返回的页面代码来判断哪个前端页面可访问)。

四:总结

因为我们的项目不可能达到千篇一律的情况,选择适合自己项目的解决方案才是最重要的,不要为了用某个技术而去用某个技术。

以上这篇vue系列之动态路由详解【原创】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS中confirm,alert,prompt函数区别分析
Jan 17 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
Nov 05 Javascript
js怎么终止程序return不行换jfslk
May 30 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
Jul 04 Javascript
Json实现异步请求提交评论无需跳转其他页面
Oct 11 Javascript
jquery 实现返回顶部功能
Nov 17 Javascript
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 Javascript
用JavaScript和jQuery实现瀑布流
Mar 19 Javascript
JS实现浏览上传文件的代码
Aug 23 Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 Javascript
javascript实现时间日期的格式化的方法汇总
Aug 06 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
Sep 10 #Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
Sep 10 #Javascript
js 发布订阅模式的实例讲解
Sep 10 #Javascript
node.js 发布订阅模式的实例
Sep 10 #Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
Sep 10 #Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
Sep 10 #Javascript
基于AngularJS的简单使用详解
Sep 10 #Javascript
You might like
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
Zend的Registry机制的使用说明
2013/05/02 PHP
PHP实现抓取Google IP并自动修改hosts文件
2015/02/12 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
PHP中header用法小结
2016/05/23 PHP
php 三元运算符实例详细介绍
2016/12/15 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
jquery $(document).ready() 与window.onload的区别
2009/12/28 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
2016/06/10 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
js 调用百度分享功能
2017/02/27 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
跟混乱的页面弹窗说再见
2019/04/11 Javascript
create-react-app中添加less支持的实现
2019/11/15 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
简单介绍Ruby中的CGI编程
2015/04/10 Python
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
python+selenium 鼠标事件操作方法
2019/08/24 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
django使用JWT保存用户登录信息
2020/04/22 Python
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2020/09/16 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
Python+Appium实现自动化清理微信僵尸好友的方法
2021/02/04 Python
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
html5时钟实现代码
2010/10/22 HTML / CSS
大四毕业生学习总结的自我评价
2013/10/31 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
孔子观后感
2015/06/08 职场文书
老干部座谈会主持词
2015/07/03 职场文书