vue进阶（1）、权限控制简单实现流程

1、当用户访问题库页面是，此时检测用户是否有权限访问该智能题库的内容，若没有检测到用户是否登录，如果没有，则跳转到登录页面。登录完成之后，在localStorage中中存储该用户的用户名和密码，并且立刻跳转到智能题库的页面。

2、当用户点击退出，该用户直接删除。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>vue测试</title>
    <script src="vue.js"></script>
    <!--1、引入全局的VueRouter对象-->
    <script src="vue-router.js"></script>
</head>
<body>
<div id="app">
</div>


</body>

<script>
    Vue.use(VueRouter);

    var QuestionBank={
        template:'' +
        '   <div>' +
        '       <h1>题库页面</h1>' +
        '   </div>',
    };

    var Home={
        template:'' +
        '<div>' +
        '   <h1>主页面</h1>' +
        '</div>',
    };
    var Login={
        data(){
            return{
                username:'',
                password:'',
            }
        },
        template:'' +
        '<div>' +
        '   <h1>登录页面</h1>' +
        '   <input type="text" v-model="username">' +
        '   <input type="password" v-model="password">' +
        '   <input type="submit" value="登录" @click="loginHandler">' +
        '</div>',
        methods:{
            loginHandler:function () {
                // 保存用户名和密码到localStorage然后跳转至相应的路由
                localStorage.setItem(
                    'user',
                    {name:this.username,password:this.password}
                    );

                // 编程式导航
                this.$router.push({name:'question_bank'})
            }
        }

    };

    var my_router=new VueRouter({
        routes:[
            {
                path:'/home',
                component:Home,
            },
            {
                path:'/questionBank',
                component:QuestionBank,
                meta:{
                    // 表名访问该组件需要登录
                    auth:true,
                },
                name:'question_bank'
            },
            {path:'/login', component:Login,},
        ]
    });

    // 全局导航守卫
    my_router.beforeEach((to, from, next) => {
        // console.log('to>>>>>>>',to); // 去哪里
        // console.log('from>>>>>',from); // 从哪里来

        if(to.meta.auth){
            // 访问的页面有权限限制，若未登录，则需要跳转至登录页面
            // console.log('跳转至登录页面');
            if(localStorage.getItem('user')){
                console.log('已登录');
                next()
            }else {
                next({path:'/login'})
            }

        }
        else {
            // 若不调用next，则页面会一直hang住
            next()
        }


    });

    var App={
         template:'' +
            ' <div>' +
            '   <router-link to="/home"">首页</router-link>' +
            '   <router-link to="/questionBank"">题库</router-link>' +
            '   <router-link to="/login"">登录</router-link>' +
            '   <a href="#" @click="clear">退出</a>' +
                 '<keep-alive>' +
                    '<router-view></router-view>' +
                 '</keep-alive>' +
             '</div>',

         methods:{
             clear(){
                 localStorage.removeItem('user')
             }
        }
    };

    new Vue({
        el:'#app',
        data:{
        },
        components:{
            App
        },
        template:'<App/>',
        router:my_router,
    })

</script>
</html>

vue进阶（1）、权限控制简单实现流程

猜你喜欢