Vue中beforeEach非登录不能访问的实例详解

  • 时间:
  • 647人关注

这篇文章主要介绍了Vue之beforeEach非登录不能访问的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧,另外这篇文章主要知识点是关于Vue、beforeEach、非登录访问、Vue中beforeEach非登录访问的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子资料:

后台的php请求就是接收这两个参数

login.vue

<template>
<div class=''>
  <input type="text" v-model="name" />
  <input type="password" v-model="password" />
  <button type="primary" @click="submitForm"><router-link :to="{path:'/'}">提交</router-link></button>
</div>
</template>

<script>
import axios from 'axios';
 export default {
  data(){
    return{
    name:'',
    password:'',
    }
  },
  methods:{
  submitForm:function(){
  var params = new URLSearchParams();
  params.append('name', this.name);
  params.append('password',this.password);
    axios({
    method: 'post',
    url: '/api/bbb.php',
    data:params
    }).then((resp)=>{
      sessionStorage.setItem('token',resp.status)// localStorage
      //以key value的形式将值存放到sessionStorage中。
      console.log(resp);
      }).catch((error)=>{
        console.log(error);
 })
   }
  }
 }
</script>

router


  {
   path: '/',
   name: 'HelloWorld',
   component: HelloWorld,
   meta:{requireAuth:true}
  },

main.js

router.beforeEach((to, from, next) => {
 console.log(to);
 console.log(from);
 console.log( sessionStorage.getItem('token'))
 if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
  if(sessionStorage.getItem('token')){ //判断sessionStorage是否存在token
   alert("已经登录了")
   next();
  }else{
   //防止死循环
   alert("暂时未登录")
   if (to.path === '/login') {
    next();
    return
   }else{
     next({
     path: '/login',
   });
 }
  }
 }
 else {
  next();
 }
 /*如果本地 存在 token 则 不允许直接跳转到 登录页面*/
 if(to.fullPath == "/login"){
  if(localStorage.getItem('token')){
   next({
    path:from.fullPath
   });
  }else {
   next();
  }
 }
});

注意一定要在router实例前使用

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。


上一篇:vue自定义H5视频播放器的实现代码

下一篇:没有了

相关内容

  • Springboot项目与vue项目整合打包的实例操作方法

    这篇文章主要介绍了Springboot项目与vue项目整合打包的实现方式,本文通过两种方式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

    07-07Springboot项目与vue项目整合打包的实现方式

    阅读更多
  • vue自定义H5视频播放器的实现代码

    这篇文章主要介绍了vue实现自定义H5视频播放器的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    02-01vue实现自定义H5视频播放器的方法步骤

    阅读更多
  • Vue实例和数据绑定

    在本篇文章里小编给大家整理的是关于Vue数据绑定实例写法以及相关知识点,需要的朋友们学习下。

    03-13Vue数据绑定实例写法

    阅读更多
  • Vue路由之JWT身份认证实例代码

    这篇文章主要介绍了Vue路由之JWT身份认证的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    03-02Vue路由之JWT身份认证的实现方法

    阅读更多
  • vuex vue简单使用方法

    在本篇文章里小编给大家整理了关于vuex vue简单使用知识点总结,有需要的朋友们可以参考下。

    03-24vuex vue简单使用知识点总结

    阅读更多
  • Spring Boot+Vue全栈开发实战

    Spring Boot+Vue全栈开发实战

    传统的JavaEE开发效率低下、配置臃肿、调试不便,严重制约了程序员的生产力。Spring Boot致力于简化开发配置,并为企业级开发提供一系列非业务性功能;而Vue则采用数据驱动视图的方式将程序

    大小:196.3 MBSpring

    点击下载
  • Vue.js前端开发:快速入门与专业应用

    Vue.js前端开发:快速入门与专业应用

    本书分为10章,包括简介、基础特性、指令、过滤器、过渡、组件、状态管理、常用插件、工程实例和Weex打包。本书从简单的单个实例和基础语法,到工程实例,将系统地讲述Vue.js在项目中的

    大小:3.6KB MB前端开发

    点击下载
  • Vue.js项目实战

    Vue.js项目实战

    Vue实用、灵便、更快,为搭建详细的当代Web运用出示了需要的全部作用,其渐进式的特性也让开发人员可以轻轻松松入门,发布后快速获得了前端工程师工作人员的亲睐。这书由Vue.js关键精英

    大小:141 MBVue

    点击下载
  • Vue.js快速入门

    Vue.js快速入门

    目前单页应用框架层出不穷,其中Vue.js是十分耀眼的项目之一,受到国内外开发人员的极度推崇。

    大小:186.6 MBWeb前端

    点击下载
  • Vue企业开发实战

    Vue企业开发实战

    本书以Vue.js 2为基础,以项目实战的方式引导读者渐进式学习Vue.js框架。本书分为项目起步、Vue.js介绍、项目插件、项目梳理等部分。

    大小:109.6 MBVue.js实战

    点击下载
  • 前端工程师必备技能:Vue移动开发实战技巧

    前端工程师必备技能:Vue移动开发实战技巧

    Vue.js是一个渐进式的JavaScript 框架,与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。作为201

    大小:122 MBVue实战

    点击下载

学习笔记

25小时40分钟前回答

vue利用路由守卫判断是否登录的实例内容

1.在router下的index.js 路由文件下,引入相关需要文件; import Vue from vueimport Router from vue-routerimport {LOGIN} from ../common/js/isloginimport HelloWorld from @/components/HelloWorldimport Login from @/page/Loginimport Index from @/page/index/indexVue.use(Router); 2.配置相关路由 const router = new Router({ routes: [ { path: /, redirect: /login }, { path: /login, component: Login }, { path: /index, meta: { requireAuth: true, // 添加该字段,表示进入这个路由是需要登录的 }, component: Index } ]}); 3.路由配置完后,根据需要登录的页面判断路由跳转 router.beforeEach((to, from, next) = { if (to.meta.requireAuth) { //如果需要跳转 ,往下走(1) if (true) { //判断是否登录过,如果有登陆过,说明有token,或……

7小时8分钟前回答

vue实现登录后页面跳转到之前页面的实例代码

在开发中我们经常遇到这样的需求,需要用户直接点击一个链接进入到一个页面,用户点击后链接后会触发401拦截返回登录界面,登录后又跳转到链接的页面而不是首页,这种问题该如何去做呢? 先说一下我们需要用到的几个API: 1.router.currentRoute:当前的路由信息对象,我们可以通过router.currentRoute.fullPath获得解析后的 URL,包含查询参数和 hash 的完整路径,如果要访问的页面的路由有命名(name)的话,可以通过router.currentRoute.name获得当前路由的名称。 2.router.replace:作用和router.push相同,不过它不会向history添加新纪录,而是替换当前的history记录。 由于大家的代码写的都不一样,我就不放我具体的实现……