OA系统登录权限管理

最新推荐文章于 2024-08-07 11:18:34 发布

正在前行的小码农

最新推荐文章于 2024-08-07 11:18:34 发布

阅读量725

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_45890564/article/details/104536492

版权

OA后台登录权限管理demo,仅限小公司使用

<body>
    <div id="app">
      <router-link to="/home">首页</router-link>
      <router-link to="/blog">博客</router-link>
      <router-view></router-view>
    </div>
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
    <script>
      const Home = {
        template: `<div>Home页面</div>`
      }
      const Blog = {
        template: `<div>Blog页面</div>`
      }
      const Login = {
        data() {
          return {
            name: '',
            pwd: ''
          }
        },
        template: `<div>
            <input type="text" v-model="name"/>
            <input type="password" v-model="pwd"/>
            <input type="button" value="提交" @click="submitForm"/>
            </div>`,
        methods: {
          submitForm() {
            window.sessionStorage.setItem(
              'user',
              JSON.stringify({ name: this.name, pwd: this.pwd })
            )
            this.$router.push('/blog')
          }
        }
      }
      let router = new VueRouter({
        routes: [
          { path: '/', redirect: '/home' },
          { path: '/home', component: Home },
          {
            path: '/blog',
            component: Blog
            //可以使用meta对象来给路由做权限控制,缺点是通过url地址栏依旧可以访问blog页面
            // meta: {
            //   //此属性为true表明访问的页面需要登录,为false则表示已登录
            //   author: true
            // }
          },
          { path: '/login', component: Login }
        ]
      })
      router.beforeEach((to, from, next) => {
        // 使用判断条件为访问路径可避免url地址栏直接访问,使用if(to.meta.author)做判断则不行
        if (to.path == '/blog') {
          const token = window.sessionStorage.getItem('user')
          if (!JSON.parse(token)) {
            return next('/login')
          }
        }
        next()
      })
      let vm = new Vue({
        el: '#app',
        data: {},
        router,
        methods: {}
      })
    </script>
  </body>