后台的php请求就是接收这两个参数
login.vue
<template> <div> <input type="text" v-model="name" /> <input type="password" v-model="password" /> <button type="primary" @click="submitForm"><router-link :to="{path:'https://www.jb51.net/'}">提交</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: 'https://www.jb51.net/', 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实例前使用