vue后台管理框架（登录）

       登录的时候输入密码存到cookie里，可以由个人选择加密方式，每次在路由跳转的时候利用router.beforeEach((to, from, next) 判断是否有token，如果有，发送到服务端验证，如果通过，就继续路由，如果没有，就重定向到登录界面。

　　鉴权也是一样的道理，在router配置中加上　meta: { role: ['Administrator'] }，在router.beforeEach（）中判断要去的那个界面是否需要权限。并且侧边栏是根据可访问的路由动态生成的，不同级别的用户可以看到的侧边栏是不一样的，这就在一定程度上做到了简单的权限管理的功能。

router.beforeEach((to, from, next) => {

      // console.log(to)

      NProgress.start(); // 开启Progress

      if (store.getters.token) { // 判断是否有token

        // alert('dont need login ');

        if (to.path === '/login') {

          next({ path: '/' });

        }

        else {//如果不是去login 而是其他需要判定权限的

          // console.log(store.getters.roles)

          if (store.getters.roles.length === 0) { // 如果当前用户没有拉取完user_info信息

            store.dispatch('GetInfo').then(res => { // 拉取user_info

              const roles = res.data.role;

              store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表

                router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表

                // console.log(store.getters.addRouters);

                next({ ...to }); // hack方法 确保addRoutes已完成

              })

            })

          } else {

            // 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓

            if (hasPermission(store.getters.roles, to.meta.role)) {

              // console.log(to.meta.role)

              // console.log("has permission");

              next();//

            } else {

              // console.log("has no permission");

              next({ path: '/', query: { noGoBack: true } });

            }

            // 可删 ↑

          }

        }

      } else {

        if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入

          next()

        } else {

          alert('please login');

          next('/login'); // 否则全部重定向到登录页

          NProgress.done(); // 在hash模式下 改变手动改变hash 重定向回来 不会触发afterEach 暂时hack方案 ps：history模式下无问题，可删除该行！

        }

      }

    });