后台的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实战之vue登录验证的实现代码,包括了Vue实战之vue登录验证的实现代码的使用技巧和注意事项,需要的朋友参考一下 最近一直在撸一个给大学生新生用的产品,在撸的时候有时候会发现自己力不从心,是不是我的能力下降,是不是我该放弃我的最热爱的事业了?这对我的心灵造成了巨大的伤害,所以我决定向苍老师起誓一定练好我这双手——好好写代码(想多的同学赶紧去面壁5秒钟再过来往下看)~~~ 我做
本文向大家介绍Vue 使用beforeEach实现登录状态检查功能,包括了Vue 使用beforeEach实现登录状态检查功能的使用技巧和注意事项,需要的朋友参考一下 使用VueRouter的beforeEach钩子函数,可以实现导航跳转前检查登录状态的需求。 1.在登录请求接口时返回用户的信息,比如 userInfo:{userId:'123', userName:'小明'},登录成功之后将us
本文向大家介绍vue+axios实现登录拦截的实例代码,包括了vue+axios实现登录拦截的实例代码的使用技巧和注意事项,需要的朋友参考一下 一个项目学会vue全家桶+axios实现登录、拦截、登出功能,以及利用axios的http拦截器拦截请求和响应。 前言 该项目是利用了Github 提供的personal token作为登录token,通过token访问你的Repository List。
本文向大家介绍Vue学习之路之登录注册实例代码,包括了Vue学习之路之登录注册实例代码的使用技巧和注意事项,需要的朋友参考一下 根据Vue.js + Element UI + MongoDB进行开发 P1 安装Vue-CLI Vue.js文档 利用Vue.js提供的一个官方命令行工具 Vue.js 主要目录结构 完成后就可以在/src/components/*.vue模板中写代码,ctrl+s保存
本文向大家介绍Python ldap实现登录实例代码,包括了Python ldap实现登录实例代码的使用技巧和注意事项,需要的朋友参考一下 下面一段代码是小编给大家介绍的Python ldap实现登录实例代码,一起看看吧
本文向大家介绍Boostrap实现的登录界面实例代码,包括了Boostrap实现的登录界面实例代码的使用技巧和注意事项,需要的朋友参考一下 Bootstrap它是一个开源的web开发前端框架。 这几天我看了下Bootstrap的官方文档。看到其中的Basic-form,突然想实现下登录界面。然后想了下实现的思路,于是就打开了桌面的H5 builder码起来。代码实现起来其实不难,但是碰到个问题,就