Vue中meta的使用之权限控制

最新推荐文章于 2024-07-06 15:31:57 发布

每一天，每一步

最新推荐文章于 2024-07-06 15:31:57 发布

阅读量732

点赞数

分类专栏： Vue 文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/u010234868/article/details/120286766

版权

Vue 专栏收录该内容

122 篇文章 2 订阅

订阅专栏

这个示例展示了如何使用Vue.js和Vue Router进行登录权限控制。用户输入用户名和密码后，信息存储在本地内存中，然后通过全局导航守卫检查登录状态，未登录用户会被重定向到登录页面，已登录用户可以访问博客内容。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>

  <script src="node_modules/vue/dist/vue.js"></script>
  <script src="node_modules/vue-router/dist/vue-router.js"></script>
  <script>
    Vue.use(VueRouter);
    var Login = {
      data() {
        return {
          name: '',
          pwd: ''
        }
      },
      template: `
        <div>
          <input type="text" v-model="name" />
          <input type="password" v-model="pwd" />
          <input type="button" value="登录" @click="loginHandler" />
        </div>
      `,
      methods: {
        loginHandler() {
          // 用户名、密码存储在本地内存中
          localStorage.setItem('user', {name: this.name, pwd: this.pwd});
          // 保存后跳转到博客页面
          // 编程式导航
          this.$router.push({
            name: 'blog'
          });
        }
      }
    }
    var Home = {
      template: `
        <div>首页内容</div>
      `
    };
    var Blog = {
      template: `
        <div>博客内容</div>
      `
    };
    var router = new VueRouter({
      routes: [
        {
          path: '/',
          redirect: '/home'
        },
        {
          path: '/home',
          component: Home
        },
        {
          path: '/blog',
          name: 'blog',
          component: Blog,
          // 权限控制：跳转到博客页面时验证是否已登录
          meta: {
            // true的时候是未登录状态
            requiresAuth: true
          }
        },
        {
          path: '/login',
          // name: 'login',
          component: Login
        }
      ]
    });
    // 全局导航守卫
    router.beforeEach((to, from, next)=>{
      console.log(to);
      console.log(from);
      if (to.meta.requiresAuth) {
        // 如果localStorage中有user，直接放行到blog
        if(localStorage.getItem('user')) {
          next();
        } else {
          next({
            path: '/login'
            // 或者使用命名路由
            // name: 'login'
          });
        }
      } else {
        // 放行
        next();
      }
    });
    var App = {
      template: `
        <div>
          <!-- 声明式导航 -->
          <router-link to="/home">首页</router-link>  
          <router-link to="/blog">博客</router-link>  
          <router-view></router-view>  
        </div>
      `
    }
    new Vue({
      el: '#app',
      template: `
        <App />
      `,
      components: {
        App
      },
      router
    });
  </script>
</body>
</html>

每一天，每一步

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue中meta的使用之权限控制

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l.
复制链接

扫一扫

专栏目录