// 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. 通用Mapper的各个方法描述,参考官方

    下面是通用Mapper的各个方法描述,主要还是看官方的描述https://mapperhelper.github.io/all/. 基础接口 Select 接口:SelectMapper<T&g ...

  2. Python:从入门到实践--第三章--列表简介--练习

    #1.将一些朋友的姓名存储在一个列表中,并将其命名为friends.依次访问该列表中的每个元素,从而将每个朋友的姓名都打印出来. #2.继续使用1中的列表,为每人打印一条消息,每条消息包含相同的问候语 ...

  3. echarts数据区域缩放(鼠标滚轮、滚动条、拉选框)

    当一个echarts图表上的数据很多时,想要查看部分区域的数据状态,可以通过数据区域缩放来实现,现总结三个方法: 鼠标滚轮缩放: var arr = []; for(var i = 0;i<15 ...

  4. mysql_索引

    .默认情况下大多使用Btree索引,该索引就是通常所见 唯一索引.聚簇索引等等,Btree用在OLTP,加快查询速度 查询表索引 show  index  from  tablename 查询表结构 ...

  5. rem,em,与px的比较用法

    在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px v ...

  6. 一个mysqldump的报错

    1.MySQL版本 5.7.14-log 2.问题分析 mysqldump -uxxx -pxxx db_nale 一般来讲上述命令主要是用于MySQL的逻辑备份,用来备份某个数据的全部表,但是我在执 ...

  7. HtmlUnit学习总结

    HtmlUnit学习总结 转载 2016年09月13日 15:58:25 标签: htmlunit / 爬虫 7304 本文摘抄其他博客或者技术论坛,自己搜集整理如下: HtmlUnit学习总结 摘要 ...

  8. Linux 的终端及设置

    Linux 的终端及设置 终端是一种字符型设备,有多种类型,通常使用tty 来简称各种类型的终端设备.终端特殊设备文件一般有以下几种: /dev/ttySn 串行端口终端 (Serial Port T ...

  9. linux中一些常用的目录简要说明

    1.目录结构 /bin:binary的缩写,一些常用的命令如:ls.qwd.cp.cd等命令保存在这个文件内. /boot:启动linux时需要使用到的一些核心文件,以及一些镜像等,删除后系统将无法开 ...

  10. 单线拨号上网时RouterOS内网端口映射的配置

    很多时候routeros 是通过单线拨号上网,假设PPP接口名为pppoe-out1 若需要添加内网ip=18.16.1.92主机的3389端口映射 ,可以在命令行键入: ip firewall na ...