22、Vue-meta做权限控制_权限控制

22 Vue-meta做权限控制

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>行找的皮卡丘</title>
  </head>
  <body>
    <div id="app">
      <router-link to='/home'>首页</router-link>
      <router-link to='/blog'>博客</router-link>
      <router-link to='/login'>登录</router-link>

      <router-view></router-view>
    </div>
  </body>
  <script type="text/javascript" src="js/vue.min.js">

  </script>
  <script type="text/javascript" src=".\node_modules\vue-router\dist\vue-router.js">

  </script>


  <script type="text/javascript">.use(VueRouter); // 局部想要使用$router要先在全局挂载

    // 首页组件
    var Home = {
      template: `
        <div>
          我是首页
        </div>
      `,
    };
    // 博客组件
    var Blog = {
      template: `
        <div>我是博客</div>
      `,

    };
    // 登陆组件
    var Login = {
      data() {
        return {
          name: '',
          pwd: '',
        }
      },
      template: `
      <div>
        <input type="text" v-model='name'/>
        <input type="password" v-model='pwd'/>
        <input type="button" name="login" value='登录' @click='clickHandler'/>
      </div>
      `,
      methods: {
        clickHandler() {
          // 点击登录时我们将账户和密码保存在浏览器中
          console.log(this.name);
          console.log(this.pwd);
          localStorage.setItem('user', {
            name: this.name,
            pwd: this.pwd
          });
          // 登录成功后跳转到博客页面
          this.$router.push({
            name: 'blog' // 命名路由
          })
        }
      }
    };
    // 创建router对象
    var router = new VueRouter({
      // 配置路由对象
      routes: [
        // 路由匹配的规则
        {
          path: '/',
          redirect: '/home' // 重定向：当访问根/时跳转到home页面
        },
        {
          path: '/home',
          component: Home,

        },
        {
          path: '/blog',
          name: 'blog',
          component: Blog,
          // 给未来的路由做权限控制
          meta: {
            // 证明用户访问该组件的时候需要登录
            auth: true
          }

        },
        {
          path: '/login',
          component: Login,
        },

      ]
    });

    // 全局守卫   守卫路由的切换  路由在切换的时候会调用该方法
    router.beforeEach((to, from,) => {
      if (to.meta.auth){   // 判断要访问的组件是否需要登录
        if (localStorage.getItem('user')) {
          next()  // 判断我们保存用户信息的位置 如果有值就放行
        } else {
          next({
            path: '/login'  // 没有值九跳转到登录页
          });
        }
      }
      
      next(); // 必须调用next()方法  不调用会夯住
    });


    new Vue({
      el: '#app',
      data() {
        return {

        }
      },
      router: router,


    });</script>
</html>

22、Vue-meta做权限控制_权限控制_02


22、Vue-meta做权限控制_html_03