前言
此文章是我自己在开发中遇到的一些权限问题,然后主要是用了一种别的方法,这种方法十分简单,通俗易懂,代码简介,一看就会,上代码
上代码
在main.js中加入
import router from './router'
//利用钩子函数来控制router的走向
router.beforeEach((to, from, next) => {
let token = localStorage.getItem("token");//登陆成功之后存储的token值
//以下是站在用户角度的4种情况,我为大家一一列举
if (token && to.path == '/login') {
//当token有值时并且路径是'/login'时,把跳转的路径变为空,形成刷新(这种情况是用户手动修改路径才会有的情况)
next('') //刷新的意思
} else if (token && to.path != '/login') {
// 当token有值时并且路径不是在'/login'时,这个就是正常登录后的情况,所以正常运行
next() //正常运行当前路径
}else if(!token&&to.path=='/login'){
// 当token无值时并且路径在'/login'时,这个就是未登录的状态,而且当前在登录页,所以正常运行登录页
next() //正常运行当前路径
}else if(!token&&to.path!='/login'){
//当token无值时并且路径没在'/login'时,这个情况是退出登录后页面进行跳转,跳转到登录页
next('./login') //这种情况是要跳到登录页
}
});
new Vue({
render: h => h(App),
router
}).$mount('#app')
结语
直接复制过去就可以使用,在注意一下你登录后有没有存token,还有登录的名字(login不要写错了),希望这些代码对你有所帮助