// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
{
path: '/',
component: require('./views/Home'),
meta: {
requiresAuth: true
}
},
]

const router = new VueRouter({
routes: routes
})

router.beforeEach((to, from, next) => {
let token = window.localStorage.getItem('token')
if (to.matched.some(record => record.meta.requiresAuth) && (!token || token === null)) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
})

export default router

<script>
// App.vue
export default {
watch:{
'$route':function(to,from){
let token = window.localStorage.getItem('token');
         if (to.matched.some(record => record.meta.requiresAuth) && (!token || token === null)) {
           next({
           path: '/login',
           query: { redirect: to.fullPath }
           })
         } else {
       next()
         }
   }
  }
}
</script>

vue登录注册及token验证的更多相关文章

  1. Vue登录注册,并保持登录状态

    关于vue登录注册,并保持登录状态,是vue玩家必经之路,网上也有很多的解决方法,但是有一些太过于复杂,新手可能会看的一脸懵逼,现在给大家介绍一种我自己写项目在用而且并不难理解的一种方法. 项目中有一 ...

  2. 【Salvation】——登录注册存储数据&验证用户

    写在前面:登录注册功能是在纯Unity3D环境内实现的,用到UGUI绘制界面技术,数据库的部分是后面拓展加进来的,这里数据存储是指存在XML用户文件中. 注册用户名和密码 zc() 用户名和密码登录 ...

  3. vue登录注册实践

    步骤一 1.安装脚手架:npm install vue-cli -g2.wepack生成html模版:vue init webpack ' 文件名'3.安装axios.js-cookie.elemen ...

  4. Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册

    说明:这里没练习静态自动验证:如果用到静态验证首先自定义一个控制器,再在Model文件夹里创建一个NiHaoModel.php 类  NiHao是自定义的,前缀可以随意,但是一定要用驼峰法(首字母大写 ...

  5. koa2+mysql+vue实现用户注册、登录、token验证

    说明: node.js提供接口,vue展现页面,前后端分离,出于编辑器功能和编辑习惯,vue用HbuilderX,node.js用VScode.(PS:仅作为学习笔记,如有不当之处欢迎指出,在此先谢为 ...

  6. koa2+redis+jwt token验证,简单注册登录

    首先新建文件夹命名koa-server,npm init,相关包的安装就不说了,这是我的package.json 新建index.js文件,编码如下,config全局配置不用管,redis是一个简单的 ...

  7. 基于 Vue + Koa2 + MongoDB + Redis 实现一个完整的登录注册

    项目地址:https://github.com/caochangkui/vue-element-responsive-demo/tree/login-register 通过 vue-cli3.0 + ...

  8. 前后端登录注册之node剖析与token的使用状态

    登录模块功能详解 1.用户名密码的格式验证 由前端完成,根据需求自行决定,不加叙述 2.点击提交按钮思路详解 前端将用户名 以及加密后的密码还有验证码输入的内容统一发给后端  由后端和数据库的数据进行 ...

  9. 用vue开发一个app(4,一个久等了的文章)H5直播平台登录注册(1)

    我上一篇关于vue的文章和这一篇时间隔了有点久了.最近终于写完了. 因为我一直想写个有点实绩的东西,而不是随便写一个教程一样东西.结合最近在项目中学到的经验和我的一点创意. 首先介绍下这是个什么! H ...

随机推荐

  1. ArcGIS中的坐标系:基本概念和常用操作(一)

    本文呢是主要是借鉴李郎平李大大的博士论文和百度百科,里面还有一点点我自己的理解,希望能帮助自己加深对于坐标系的认识. 李大大的博客:http://blog.sciencenet.cn/u/Brume ...

  2. Container 组件

      Container 组件       padding: const EdgeInsets.fromLTRB(10, 0, 30, 0),//内边距 margin: const EdgeInsets ...

  3. HTML5网页制作(3)

    今天,就开始嵌入图片以及创建图片分区的学习吧! 这两张图片其实是我用HTML5写的(纯粹当做笔记来记了),以上就是今天要学的一些内容 下面是我今天敲的代码:  [冒泡]林北的爸爸 2019/4/29  ...

  4. 实验四 CC2530平台上UART组件的TinyOS编程

    实验四 CC2530平台上UART组件的TinyOS编程 实验目的: 加深和巩固学生对于TinyOS编程方法的理解和掌握 让学生初步掌握CC2530的UART.及其TinyOS编程方法 学生通过本实验 ...

  5. jsp的四个作用域page、request、session、application

    1.简单说 page指当前页面.在一个jsp页面里有效 2.request 指从http请求到服务器处理结束,返回响应的整个过程.在这个过程中使用forward方式跳转多个jsp.在这些页面里你都可以 ...

  6. 小妖精的完美游戏教室——人工智能,A*算法,启发因子篇

    //================================================================//// Copyright (C) 2017 Team Saluk ...

  7. 钱管够,你能接这个项目吗?+ tomcat源码分析

    最近看了几个咕泡学院的公开课,课堂老师讲到下面这两个经历. 1:钱给够,你有没有能力接下这个全国性的项目 平时也会有怀才不遇的时候,但是当你遇到这个机会的时候,有没有信心去接下这个单子呢? 信心和能力 ...

  8. cordova原生页面切换效果插件的使用:com.telerik.plugins.nativepagetransitions

    1. 添加插件:cordova plugin add com.telerik.plugins.nativepagetransitions2. 使用方法: 在index.html中添加: <met ...

  9. 游戏编程算法与技巧 Game Programming Algorithms and Techniques (Sanjay Madhav 著)

    http://gamealgorithms.net 第1章 游戏编程概述 (已看) 第2章 2D图形 (已看) 第3章 游戏中的线性代数 (已看) 第4章 3D图形 (已看) 第5章 游戏输入 (已看 ...

  10. 深入理解JavaScript事件循环机制

    前言 众所周知,JavaScript 是一门单线程语言,虽然在 html5 中提出了 Web-Worker ,但这并未改变 JavaScript 是单线程这一核心.可看HTML规范中的这段话: To ...