Vue的路由守卫是什么东西呢?
第一次接触很懵逼,知道自己遇到了这样一个需求,
在页面之间进行路由跳转时,需要进行一个判断,如果下一个页面是需要登录后才能进入的页面,那么就需要在点击进入该页面的时候进行守卫的判断,判断用户是否登录,如果登录过了。就直接进入需要进入的页面,如果没有登录过,则进入登录页面。
那么问题来了,怎么知道登录过还是没有登录过呢?
在点击登录的时候,会请求后台的api,这时,后台会返回一个token字段。我们需要将该字段存储到storage或者cookie中。然后在路由守卫中加入读取出来判断他是否存在久可以判断是否登录过。
一般我们选择存入storage中,因为cookie会在每次请求时,伴随发送。性能上没有storage好些。
下面是一个例子:
router.js
import Vue from 'vue';
import Router from 'vue-router';
import LoginPage from '@/pages/login';
import HomePage from '@/pages/home';
import GoodsListPage from '@/pages/good-list';
import GoodsDetailPage from '@/pages/good-detail';
import CartPage from '@/pages/cart';
import ProfilePage from '@/pages/profile'; Vue.use(Router) const router = new Router({
routes: [
{
path: '/', // 默认进入路由
redirect: '/home' //重定向
},
{
path: '/login',
name: 'login',
component: LoginPage
},
{
path: '/home',
name: 'home',
component: HomePage
},
{
path: '/good-list',
name: 'good-list',
component: GoodsListPage
},
{
path: '/good-detail',
name: 'good-detail',
component: GoodsDetailPage
},
{
path: '/cart',
name: 'cart',
component: CartPage
},
{
path: '/profile',
name: 'profile',
component: ProfilePage
},
{
path: '*', // 错误路由
redirect: '/home' //重定向
},
]
}); // 全局路由守卫
router.beforeEach((to, from, next) => {
console.log('navigation-guards');
// to: Route: 即将要进入的目标 路由对象
// from: Route: 当前导航正要离开的路由
//如果next为空则路由正常进行跳转,如果next不为空,则进行跳转时,会中断 const nextRoute = ['home', 'good-list', 'good-detail', 'cart', 'profile'];
let isLogin = global.isLogin; // 是否登录,一般从storage中读取
// 未登录状态;当路由到nextRoute指定页时,跳转至login
if (nextRoute.indexOf(to.name) >= 0) {
if (!isLogin) {
console.log('what fuck');
router.push({ name: 'login' })
}
}
// 已登录状态;当路由到login时,如果已经登录过,则跳转至home
if (to.name === 'login') {
if (isLogin) {
router.push({ name: 'home' });
}
}
next();
}); export default router;

vue之全局守卫的更多相关文章

  1. Vue 2.0 路由全局守卫

    vue2.0 实现导航守卫(路由守卫) 路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navi ...

  2. vue --- 全局守卫

    vue2.0 实现导航守卫(路由守卫) 路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navi ...

  3. vue中使用router全局守卫实现页面拦截

    一.背景 在vue项目中使用vue-router做页面跳转时,路由的方式有两种,一种是静态路由,另一种是动态路由.而要实现对路由的控制需要使用vuex和router全局守卫进行判断拦截(安全问题文章最 ...

  4. 添加一个vue全局守卫,主要用于用户登录时候验证

    //注册一个全局守卫,作用是在路由跳转钱,对路由进行判断,防止未登录用户跳转到其他页面 router.beforeEach((to, from, next) => { let token = l ...

  5. vue 定义全局函数,监听android返回键事件

    vue 定义全局函数,监听android返回键事件 方法一:main.js 注入(1)在main.js中写入函数Vue.prototype.changeData = function (){ aler ...

  6. 生命周期函数以及vue的全局注册

    beforeCreate 在创造实例之前 created 创造实例以后 beforeMount 在挂载前 render 渲染节点到页面上 //将虚拟dom数组渲染出来 mounted 挂载以后 bef ...

  7. vue入门全局配置

    全局配置 Vue.config 是一个对象,包含 Vue 的全局配置.可以在启动应用之前修改下列属性: silent 类型:boolean 默认值:false 用法: Vue.config.silen ...

  8. vue 自定义全局方法

    import {myfun} from '../static/js/test.js' //se6的正确写法export default {methods:{ diyfun:function () { ...

  9. 黑马vue---28、vue中全局过滤器的基本使用

    黑马vue---28.vue中全局过滤器的基本使用 一.总结 一句话总结: vue中的过滤器可以传递参数(根据参数来过滤),也可以用管道符拼接多个过滤器:例如<p>{{ msg | msg ...

随机推荐

  1. CentOS安装wkhtmltopdf及解决中文支持问题

    安装wkhtmltopdf,先下载  wkhtmltox-0.12.2.1_linux-centos6-amd64.rpm yum install -y wkhtmltox-0.12.2.1_linu ...

  2. 解决node-sass安装不了的问题

    1.下载https://github.com/sass/node-sass-binaries/blob/master/win32-x64-48_binding.node到E:\primeng\lib目 ...

  3. 转载- ACM常见的各种说法

    from : http://blog.csdn.net/qq_15015129/article/details/52738184 1.答案错误 —— wrong answer 就是最常见的.这个没办法 ...

  4. kuangbin大佬模板(侵删)- hdu 2222

    2017-08-13 19:54:08 kuangbin的AC自动机模板 可以直接过 入门题目 hdu2222 #include<cstdio> #include<cstring&g ...

  5. ABP 源码分析汇总之 IOC

    IOC的优点: 1. 依赖接口,而非实现,如下代码, 这样的好处就是,客户端根本不知道PersonService的存在,如果我们换一下IPersonService的实现,客户端不用任何修改, 说的简单 ...

  6. Javascript 十移跳转页面

    <srcipty> var t = 10; function openwin(){ t -= 1; if( t==0){ location.href='prototype.html'; } ...

  7. git 提交作业流程

    git 提交作业流程,主要分为4个步骤 # 拉取远程git最新版本到本地,每次都可以先执行这条命令,因为会有其他同学更新仓库 git pull # add需要上传的文件,那个文件修改或者新增的,就ad ...

  8. zsh 安装powerline 主题特效

    查看当前使用的shell脚本是哪一种   echo $0 1. 安装Powerline   使用pip指令,安装方法:   pip install powerline-status   如果没有,则先 ...

  9. syslinux启动盘制作

    # <font color=DarkCyan >syslinux启动盘制作</font> # ### 准备工具 ### 1. BOOTICEx64 软件 ##分区引导制作工具 ...

  10. leetcode 720. Longest Word in Dictionary

    Given a list of strings words representing an English Dictionary, find the longest word in words tha ...