meta权限控制

最新推荐文章于 2025-03-08 09:27:35 发布

吕招焕

最新推荐文章于 2025-03-08 09:27:35 发布

阅读量985

点赞数

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/u011090104/article/details/104669234

版权

Vue 专栏收录该内容

14 篇文章

订阅专栏

本文详细探讨了HTML中的meta标签如何实现权限控制，包括其在隐私、缓存、内容安全等方面的使用，通过示例代码展示如何设置meta标签以达到预期效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

meta权限控制

html代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03_meta的使用_权限控制</title>
</head>
<body>
    <div id="app">
        <router-link to='/home'>首页</router-link>
        <router-link to='/blog'>博客</router-link>
        <router-link to='/login'>登录</router-link>
        <a href="javascript:void(0)">退出</a>

        <router-view></router-view>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>

</body>
</html>

js代码块

    <script type="text/javascript">
        Vue.use(VueRouter);
        var Home = {
            template:`
            <div>我是首页</div>
                
            `
        };
        var Blog = {
            template:`
            <div>我是博客</div>
                
            `
        };
        var Login = {
            data(){
                return{
                    userName:'',
                    pwd:''
                }
            },
            template:`
            <div>
                <input type="text" v-model='userName'>
                <input type="password" v-model='pwd'>
                <input type="button" value="登录" v-on:click='eventHander'>
            </div>
                
            `,
            methods:{
                eventHander(){
                    localStorage.setItem('user',{name:this.userName,pwd:this.pwd});
                    this.$router.push({
                        name:'blog'
                    })
                }
            }
        };
        var router = new VueRouter({
            routes:[
                {
                    path:'/',
                    redirect:'home'
                },
                {
                    path:'/home',
                    component:Home
                },
                {
                    path:'/blog',
                    name:'blog',
                    component:Blog,
                    meta:{
                        auth:true
                    }
                },
                {
                    path:'/login',
                    component:Login
                }
            ]
        });
        router.beforeEach((to,from,next)=>{
            // console.log(to);
            // console.log(from);
            if(to.meta.auth){
                if(localStorage.getItem('user')){
                    next()
                }else{
                    next({
                    path:'/login'
                    });
                }

            }else{
                next();
            }

        });
        new Vue({
            el:'#app',
            router
        });
    </script>