vue通过本地token控制用户登录前后的权限

前言

此文章是我自己在开发中遇到的一些权限问题，然后主要是用了一种别的方法，这种方法十分简单，通俗易懂，代码简介，一看就会，上代码

上代码

在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不要写错了)，希望这些代码对你有所帮助