OA系统登录权限管理

心已赠人 2023-07-09 02:21 16阅读 0赞

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>