在传统的网页中:

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. SpringCloud教程二:Ribbon(Finchley版)

    在上一篇文章,讲了服务的注册和发现.在微服务架构中,业务都会被拆分成一个独立的服务,服务与服务的通讯是基于http restful的.Spring cloud有两种服务调用方式,一种是ribbon+r ...

  2. Error response from daemon: Get https://registry-1.docker.io/v2/library/nginx/manifests/1.14-alpine: Get https://auth.docker.io/token?scope=repository%3Alibrary%2Fnginx%3Apull&service=registry.docker.

    docker pull 镜像时报错: Error response from daemon: Get https://registry-1.docker.io/v2/library/nginx/man ...

  3. shell读取文件写入新文件

    #!/bin/sh #系统简称 SYST="HVPS" #发送行号 SEND1234SEND=" #接收行号 RECV1234RECV=" cd /home/w ...

  4. Unreal Engine 4 系列教程 Part 5:制作简单游戏

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  5. 自力更生Collections.sort发现比较结果混乱?Comparator的锅还是强转类型导致?

    近日开发任务时间充裕一些,于是有时间回顾一下项目. 我关注到了项目中使用的七牛云的对象存储服务. 作为测试需要上传了一些图片,但七牛的控制台却无法将内容按照上传时间排序或者是按照日期查询,由于buck ...

  6. postman简单介绍

  7. 05jmeter-responses中有多组json数据,提取同一条json数据的两个字段

    某接口返回结果如上图,取id和groupNo 1.读取确定的某条json数据:如取第一条,一个JSON Extractor即可实现 2.随机读取某条json数据: 需要两个JSON Extractor ...

  8. vmware14安装centos7的步骤(图文详解)

    一.centos的安装 centos分为桌面版和黑屏版(命令行版):在这里我使用的是命令行版. 这里选择安装程序光盘映像文件,文件就是centos7的iso文件. 虚拟机的名称和位置自行设置; 虚拟机 ...

  9. PHP5底层原理之变量

    PHP5底层原理之变量 变量结构 zval 结构体 PHP 所有类型的变量在底层都会以 zval 结构体的形式实现 (源码文件Zend/zend.h) 源码根目录搜索 grep -rin --colo ...

  10. epoll(2) 源码分析

    epoll(2) 源码分析 文本内核代码取自 5.0.18 版本,和上一篇文章中的版本不同是因为另一个电脑出了问题,但是总体差异不大. 引子留下的问题 关键数据结构 提供的系统调用 就绪事件相关逻辑 ...