Vue路由守卫（权限拦截控制）

一、权限拦截控制思路

 1. 设置组件路由守卫，从本地拿到token，如果有token就代表已经登录了，可以访问其他页面，如果没有token就提示未登录，跳转到登录页面
 2. 如果有token，在访问一个父组件的时候就携带该token发送请求获取用户信息，获取用户信息成功就把信息存到vuex中，失败了，就是token过期了，返回登陆页面 

父组件代码：

<script>
import myAside from "@/views/managehome/aside/Aside.vue";
import myHeader from "@/views/managehome/header/Header.vue";
import myMian from "@/views/managehome/main/Main.vue";
import { getUserInfo } from "@/api/index.js";
// 引入messsage
import { Message } from "element-ui";
export default {
  name: "myManagehome",
  components: {
    myAside,
    myHeader,
    myMian
  },
  async created() {
    await getUserInfo()
      .then(res => {
        if (res.data.code == 1000) {
          this.$store.commit('UserInfo/SETUSERINFO',res.data.data)
        } else {
          this.$router.push("/login");
        }
      })
      .catch(err => {
        console.log(err);
      });
  },
  // 组件路由首位
  beforeRouteEnter(to, from, next) {
    const token = localStorage.getItem('token')
    if(token){
      next()
    }else{
      Message.error('未登录')
      next('/login')
    }
  }
};
</script>