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 相关文章推荐
jquery选择器(常用选择器说明)
Sep 28 Javascript
浅析javascript闭包 实例分析
Dec 25 Javascript
js 中的switch表达式使用示例
Jun 03 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
Dec 26 Javascript
jquery遍历select元素(实例讲解)
Dec 31 Javascript
js获取当前日期时间及其它日期操作汇总
Mar 08 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
Oct 30 Javascript
浅谈angular.js跨域post解决方案
Aug 30 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
Nov 22 Javascript
jQuery实现网页拼图游戏
Apr 22 jQuery
redux.js详解及基本使用
May 24 Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 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
PHP提交表单失败后如何保留已经填写的信息
2014/06/20 PHP
php组合排序简单实现方法
2016/10/15 PHP
PDO::getAvailableDrivers讲解
2019/01/28 PHP
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
javascript抽象工厂模式详细说明
2014/12/16 Javascript
JavaScript简介
2015/02/15 Javascript
详解JavaScript中的表单验证
2015/06/16 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
详解JavaScript中的事件流和事件处理程序
2016/05/20 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
layer iframe 设置关闭按钮的方法
2019/09/12 Javascript
对vue生命周期的深入理解
2020/12/03 Vue.js
wxPython中listbox用法实例详解
2015/06/01 Python
Python基于回溯法子集树模板解决全排列问题示例
2017/09/07 Python
python密码错误三次锁定(实例讲解)
2017/11/14 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
通过shell+python实现企业微信预警
2019/03/07 Python
python如何实现数据的线性拟合
2019/07/19 Python
使用Windows批处理和WMI设置Python的环境变量方法
2019/08/14 Python
django模型动态修改参数,增加 filter 字段的方式
2020/03/16 Python
Python爬虫开发与项目实战
2020/12/16 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
Ubuntu20.04环境安装tensorflow2的方法步骤
2021/01/29 Python
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
英国IT硬件供应商,定制游戏PC:Mesh Computers
2019/03/28 全球购物
生日寄语大全
2014/04/08 职场文书
大学新生军训方案
2014/05/03 职场文书
教师反腐倡廉演讲稿
2014/09/03 职场文书
搞笑老公保证书
2015/02/26 职场文书
羊脂球读书笔记
2015/06/30 职场文书
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技