vue在路由中验证token是否存在的简单实现

1. 在router/index.js进行验证

2. 代码如下：

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/common/Login';
......

Vue.use(Router)
const router = new Router({
 routes: [{
   path: '/',
   name: Login,
   component: Login,
  },
  {
   path: '/home',
   component: Home,
   meta: {
    requiresAuth: true   // 要求验证的页面,在此情况下其子页面也会被验证.
   },
   children: [{
     path: '/paChong',
     name: 'PaChong',
     component: PaChong
    }
   ]
  }
 ]
})
router.beforeEach((to, from, next) => {
 if (to.matched.some(record => record.meta.requiresAuth)) {   // 哪些需要验证
  if (!sessionStorage.getItem("token")) {           // token存在条件
   next({
    path: '/',                        // 验证失败要跳转的页面
    query: {
      redirect: to.fullPath                 // 要传的参数
     }
   })
  } else {
   next()
  }
 } else {
  next()                            // 确保一定要调用 next()
 }
})

export default router

以上这篇vue在路由中验证token是否存在的简单实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue登录注册及token验证实现代码

    在大多数网站中,实现登录注册都是结合本地存储cookie.localStorage和请求时验证token等技术.而对于某些功能页面,会尝试获取本地存储中的token进行判断,存在则可进入,否则跳到登录页或弹出登录框. 而在vue单页中,我们可以通过监控route对象,从中匹配信息去决定是否验证token,然后定义后续行为. 具体实现代码如下: 1. 利用router.beforeEach钩子, 判断目标路由是否携带了相关meta信息 // router.js import Vue from 'v

  • vue+koa2实现session、token登陆状态验证的示例

    Session 登陆与 Token 登陆的区别 1.Session 登陆是在服务器端生成用户相关 session 数据,发给客户端 session_id 存放到 cookie 中,这样在客户端请求时带上 session_id 就可以验证服务器端是否存在 session 数据,以此完成用户认证.这种认证方式,可以更好的在服务端对会话进行控制,安全性比较高(session_id 随机),但是服务端需要存储 session 数据(如内存或数据库),这样无疑增加维护成本和减弱可扩展性(多台服务器). C

  • 详解vue项目中使用token的身份验证的简单实践

    工作原理 前端页面进行登录操作, 将用户名与密码发给服务器; 服务器进行效验, 通过后生成token, 包含信息有密钥, uid, 过期时间, 一些随机算法等 ,然后返回给前端 前端将token保存在本地中, 建议使用localstorage进行保存.  下次对服务器发送请求时, 带上本地存储的token 服务器端,进行对token的验证, 通过的话, 进行相应的增删改查操作, 并将数据返回给前端 为通过则返回错误码, 提示保错信息, 然后跳转到登录页. 具体步骤 所用技术: vuex + ax

  • 基于vue 实现token验证的实例代码

    vue-koa2-token 基于vue的 做了token验证 前端部分(对axios设置Authorization) import axios from 'axios' import store from '../store' import router from '../router' //设置全局axios默认值 axios.defaults.timeout = 6000; //6000的超时验证 axios.defaults.headers.post['Content-Type'] =

  • vue拦截器实现统一token,并兼容IE9验证功能

    项目中使用vue搭建前端页面,并通过axios请求后台api接口,完成数据交互.如果验证口令token写在在每次的接口中,也是个不小的体力活,而且也不灵活.这里分享使用vue自带拦截器,给每次请求的头部添加token,而且兼容了IE9. import axios from 'axios'; // 这里的config包含每次请求的内容,在这里把token放到请求头 axios.interceptors.request.use(function (config) { let token = wind

  • vue 实现axios拦截、页面跳转和token 验证

    第一步: 路由 多添加一个自定义字段 requireAuth path: '/repository', name: 'repository', meta: { requireAuth: true, // 添加该字段,表示进入这个路由是需要登录的 }, component: Repository 第二步: router.beforeEach((to, from, next) => { if (to.meta.requireAuth) { // 判断该路由是否需要登录权限 if (store.sta

  • vue在路由中验证token是否存在的简单实现

    1. 在router/index.js进行验证 2. 代码如下: import Vue from 'vue' import Router from 'vue-router' import Login from '@/components/common/Login'; ...... Vue.use(Router) const router = new Router({ routes: [{ path: '/', name: Login, component: Login, }, { path: '

  • Vue中登录验证成功后保存token,并每次请求携带并验证token操作

    在vue中,可以用**Storage(sessionStorage,localStorage)**来存储token,也可以用vuex来存储(但要考虑页面刷新数据消失问题,可以在vuex用Storage), 下面介绍用localStorage来存储: 在登录请求成功后,会返回一个token值,用loaclStorage保存 localStorage.setItem('token',res.data.token) 在main.js中设置全局请求头和响应回来的判断 //设置axios请求头加入toke

  • Vue利用路由钩子token过期后跳转到登录页的实例

    在Vue2.0中的路由钩子主要是用来拦截导航,让它完成跳转或前取消,可以理解为路由守卫. 分为全局导航钩子,单个路由独享的钩子,组件内钩子. 三种 类型的钩子只是用的地方不一样,都接受一个函数作为参数,函数传入三个参数,分别为to,from,next. 其中next有三个方法 (1)next(); //默认路由 (2)next(false); //阻止路由跳转 (3)next({path:'/'}); //阻止默认路由,跳转到指定路径 这里我使用了组件内钩子进行判断token过期后跳转到登录页,

  • Vue实现用户登录及token验证

    Vue实现用户登录及token验证

    在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下: 1.第一次登录的时候,前端调后端的登陆接口,发送用户名和密码 2.后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token 3.前端拿到token,将token存储到localStorage和vuex中,并跳转路由页面 4.前端每次跳转路由,就判断 localStroage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面 5.每次调后端接口,都要在请求头中加token 6.后端判断请求头中有无

  • vue登录路由验证的实现

    vue登录路由验证的实现

    vue的项目的登录状态如果用vuex状态管理,页面一刷新vuex管理的状态就会消失,这样登录路由验证就没有意义了.可以将登录的状态写到web Storage中进行存储管理. 步骤如下: 1.在登录组件里,将登录状态写入web Storage里.(一般写入session Storage,会话关闭,存储数据自动删除) if('登录成功') {sessionStorage.setItem('accessToken' , 写入登录成功返回的登录令牌或者自定义的判断字符串) } 2.在需要登录验证的路由元

  • 在vue中获取token,并将token写进header的方法

    需要准备的东西:Vue+axios+Vuex+Vue-router 1.在login.vue中通过发送http请求获取token //根据api接口获取token var url = this.HOST + "/session"; this.$axios.post(url, { username: this.loginForm.username, password: this.loginForm.pass }).then(res => { // console.log(res.d

  • Vue 配合eiement动态路由,权限验证的方法

    1.要实现动态路由,只需要在main.js中将所有路由表先规定好,如下 const routes=[ {path:'/login',component:login},/*登录*/ {path:'/home',component:home},/*首页*/ {path:'/monitor',component:monitor},/*实时监控*/ {path: "/orderQuery", component: orderQuery},/*电子围栏*/ {path: "/fence

随机推荐