vuex模块化配合vue-router全局路由守卫做登陆权限控制

一，实现vuex的模块化使用

二，创建vue-router全局路由守卫做登陆权限控制的文件

当我们使用vue-router创建路由之后，这时是可以切换url随意访问任意页面的。
为了让login和404页面不需要登陆就可以访问，而其他页面则需要登陆后才可以访问。
就需要使用全局路由守卫做登陆权限来控制。
persission.js

import router from "@/router";
import store from "@/store";
import NProgress from "nprogress";
import "nprogress/nprogress.css";

NProgress.configure({ showSpinner: false });

//免登陆白名单
const whiteList = ["/login", "/404"];

function permission(to, next) {
  if (store.state.login.x_user_token) {
    // 已登录
    if (to.path === "/login") {
      next();
      NProgress.done();
    } else {
      to.matched.length === 0 ? next("/404") : next();
    }
  } else {
    // 未登录
    if (whiteList.indexOf(to.path) !== -1) {
      // 在免登录白名单，直接进入
      next();
    } else {
      next(`/login?redirect=${to.fullPath}`); // 未登录重定向到登录页
      NProgress.done();
    }
  }
}

router.beforeEach(async (to, from, next) => {
  NProgress.start();
  permission(to, next);
});

router.afterEach(() => {
  NProgress.done();
});

然后再在入口文件中引入即可：

import "./router/permission"; // permission control