vue能控制未登陆的请求不能访问url_Vue中beforeEach非登录不能访问的实例详解

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

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

login.vue

提交

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);

})

}

}

}

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

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

以上就是本次给大家分享的关于java的全部知识点内容总结，大家还可以在下方相关文章里找到相关文章进一步学习，感谢大家的阅读和支持。

您可能感兴趣的文章: