Vue之beforeEach非登录不能访问的实现(代码亲测)


Posted in Javascript onJuly 18, 2019

后台的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实例前使用

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Auntion-TableSort国人写的一个javascript表格排序的东西
Nov 12 Javascript
Javascript面象对象成员、共享成员变量实验
Nov 19 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
Jun 06 Javascript
JavaScript使用yield模拟多线程的方法
Mar 19 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
详解webpack打包vue时提取css
May 26 Javascript
前端构建工具之gulp的语法教程
Jun 12 Javascript
新手vue构建单页面应用实例代码
Sep 18 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
实战node静态文件服务器的示例代码
Mar 08 Javascript
在vue中使用Autoprefixed的方法
Jul 27 Javascript
jquery实现下载图片功能
Jul 18 #jQuery
jQuery实现图片下载代码
Jul 18 #jQuery
使用react context 实现vue插槽slot功能
Jul 18 #Javascript
jquery图片预览插件实现方法详解
Jul 18 #jQuery
vue使用自定义指令实现拖拽
Jan 29 #Javascript
对TypeScript库进行单元测试的方法
Jul 18 #Javascript
基于JS实现数字动态变化显示效果附源码
Jul 18 #Javascript
You might like
PHP 开发环境配置(测试开发环境)
2010/04/28 PHP
PHP缓存技术的多种方法小结
2012/08/14 PHP
PHP实现的简单日历类
2014/11/29 PHP
PHP之十六个魔术方法详细介绍
2016/11/01 PHP
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
Jquery中删除元素的实现代码
2011/12/29 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
JS版的date函数(和PHP的date函数一样)
2014/05/12 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
简述Matlab中size()函数的用法
2016/03/20 Javascript
获取input标签的所有属性的方法
2016/06/28 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
Sublime Text新建.vue模板并高亮(图文教程)
2017/10/26 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
Vue实现todo应用的示例
2021/02/20 Vue.js
Python读写配置文件的方法
2015/06/03 Python
Python实现快速排序算法及去重的快速排序的简单示例
2016/06/26 Python
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
PyCharm-错误-找不到指定文件python.exe的解决方法
2019/07/01 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
基于Tensorflow:CPU性能分析
2020/02/10 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
餐饮加盟计划书
2014/01/10 职场文书
仓库管理计划书
2014/05/04 职场文书
经营场所证明范本
2015/06/19 职场文书
海底两万里读书笔记
2015/06/26 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书
辞职信怎么写?
2019/05/21 职场文书
Nginx配置https原理及实现过程详解
2021/03/31 Servers
JavaScript异步操作中串行和并行
2021/11/20 Javascript