vue-判断用户是否登录

在项目中，最基本的登录都是必须的，结合Vue的路由，涉及最多的就是登录状态的判断。
（1）判断登录方案需要满足下面几点:
未登录状态下的刷新:

1. 在需要登录页面中刷新是需要跳转到登录页的;
2. 在不需要登录的页面中刷新,不需要跳转;

（2）在未登录状态下,跳转到需要登录页面时,会直接跳转到登录页;

一、先在路由文件里修改--------router / index.js 路由中加校验
直接在路由配置的时候，给路由添加一个自定义的meta对象，在meta对象中可以设置一些状态，来进行一些操作。用它来做登录校验再合适不过了

{
      path: "/mengxiang",
      name: "Mengxiang",
      component: Mengxiang,
      meta: {
        needLogin: true //需要加校检判断的路由
      },
    },

二、main.js 中判断该路由是否需要登录权限

router.beforeEach(function(to, from, next) {
  if (to.meta.needLogin) {
    //页面是否登录
    if (localStorage.getItem("token")) {
      //本地存储中是否有token(uid)数据
      next(); //表示已经登录
    } else {
      //next可以传递一个路由对象作为参数 表示需要跳转到的页面
      next({
        name: "login"
      });
    }
  } else {
    //表示不需要登录
    next(); //继续往后走
  }
});

三、login.vue 登录组件内，登陆成功后的处理

  methods: {
    onClickLeft() {
      this.$router.go("-1");
    },
    login() {
      axios({
        type: "get",
        url: "请求的接口路径",
        params: { username: this.phone, password: this.password }
      }).then(res => {
        console.log(res);
        localStorage.setItem("token", this.phone);
        this.$router.push({
          name: "Home"
        });
      });
    },
    }

以上就实现了判断是否登录的状态，如果未登录的状态就会跳转到登录页面