Vue--系统权限拦截

简介: Vue--系统权限拦截

前戏


前面我们实现了退出功能,退出之后会清掉浏览器里保存的 token ,并且会返回到登录页面,让我们登录,但是有一个问题,当我们退出之后,访问首页,或者会员的 URL ,都是可以访问到的,这是因为虽然我们退出掉,并清理掉 token,但是我们访问其他页面是不需要token的,所以我们在访问非登录和注册页面的话,可以先校验下浏览器里是否有token,如果有,在进入到对应的页面,如果没有,则返回到登录页面,让用户进行登录。

我们可以采用 Vue Router中路由得前置钩子函数(beforeEach),在前置中根据路由地址校验此路由是否允许访问。

Vue Router中的前置钩子函数beforeEach(to, from, next)当进行路由跳转之前,进行判断是否已经登录过,登录过则允许访问非登录页面,否则,回到登录页面

  • to:即将要进入的目标路由对象
  • from:即将要离开的路由对象
  • next:是一个方法,可以指定路由地址,进行路由跳转


实现


在src根目录下新建 premission.js 文件,写入如下代码

// 权限校验,要在main.js文件里导入才会有效
/*
Vue Router中的前置钩子函数beforeEach(to, from, next)
当进行路由跳转之前,进行判断是否已经登录过,登录过则允许访问非登录页面,否则,回到登录页面
to:即将要进入的目标路由对象
from:即将要离开的路由对象
next:是一个方法,可以指定路由地址,进行路由跳转
*/
import router from './router'  // 所有的路由跳转都是在这个里面的
   // 获取校验token的接口,自己实现
router.beforeEach((to, from, next)=>{
    // 获取token
    const token = localStorage.getItem('zz-token')
    if(!token){
        // 如果没有获取到,要访问非登录页面,则不让访问,回到登录页面 /login
        if(to.path == '/login'){
            next() // 等价于 next({path: '/login'}),会自动获取到上面的路由 
        }else if(to.path == '/register'){
            //
            next({path: '/register'})
        }else{
            // 请求登录页面
            next({path: '/login'})
        }
    }else{
        // 获取到token,
        // 请求路由是/login,则去目标路由
        if(to.path === '/login'){
            next()
            // 请求路由是/register,则去register
        }else if(to.path === '/register'){
            next()
        }
        else{
            // 请求路由非登录页面,直接进入,不严格,可以将token发送到服务器进行验证
            next()
        }
    }
})

这样只是写好了,还没有引用,要想要生效必须先引用,在同级的 main.js里写入下面两行代码

// 权限拦截,全局的
import './premission'

重启启动项目,测试,通过


相关文章
|
22天前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
22天前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
21 1
|
22天前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
27 1
|
22天前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
22天前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1059 0
|
24天前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
|
26天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
31 1
vue学习第一章
|
26天前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
24 1
vue学习第三章
|
26天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
35 1
vue学习第四章