10 前端权限控制(路由元信息)

编辑本文章

1、路由元信息

在需要登陆后才能访问的路由上添加一个meta字段，meta: { requiresAuth: true }

2、权限功能实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>18-路由元控制权限</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 type="application/javascript">
    var App={
        template: `
            <div>
                <router-link :to="{name:'home'}">首页</router-link>
                <router-link :to="{name:'learn'}">需登陆</router-link>
                <router-link :to="{name:'login'}">登陆</router-link>
                <a href="javascript:void(0)" @click="logoutHandler">退出</a>
                <router-view></router-view>
            </div>`,

        methods:{
            logoutHandler(){
                //退出操作
                localStorage.removeItem('user');
                this.$router.push({name:'login'});
                console.log("退出操作")
            }
        }
    };
    var Home={
        template:`<div>主页</div>`
    };
    var Learn={
        template:`<div>需登陆后访问的资源</div>`
    };

    var Login={
        template:`<div>
            <input type="text" v-model="name">
            <input type="text" v-model="pwd">
            <input type="submit" value="登陆" @click="loginHandler">
        </div>`,
        data(){
            return {
                name:'',
                pwd:''
            }
        },
        methods:{
            loginHandler(){
                //登陆操作，存储用户名和密码，保存到localStoragy
                localStorage.setItem('user',{name:this.name,pwd:this.pwd});
                //登陆完成后用编程式导航直接跳转到登陆前的路由
                this.$router.push({name:"learn"})
            }
        }
    };

    Vue.use(VueRouter);
    var router=new VueRouter({
        routes:[
            {
                name:'home',
                path:'/home',
                component:Home
            },
            {
                name:'learn',
                path:'/learn',
                component:Learn,
                //给to的路由做权限控制,true则表示需要登陆
                meta: { requiresAuth: true }
            },
            {
                name:'login',
                path:'/login',
                component:Login
            }
        ]
    });
    //全局导航守卫，全局监控路由切换
    router.beforeEach(function (to, from,next) {
        //to:去往的路由对象
        //from:来的路由
        //next:next是next函数，
        if(to.meta.requiresAuth){
            //访问的资源需要登陆，判断用户是否有登陆
            if(localStorage.getItem('user')){
                //不为空，表示用户已经登陆
                next()
            }else{
                //否则跳转到登陆页面
                next({path:'/login'})
            }
        }else {
            //直接放行
            next()
        }
    });
    new Vue({
        el:"#app",
        template:`<App/>`,
        components:{
            App
        },
        router:router
    })
</script>
</body>
</html>
View Code

 

1、当用户访问需要登陆后才能访问的资源时，全局导航守卫检测用户是否有权限访问该内容，没有则检测用户是否登陆过，如果没有则跳转登陆页面。

2、点登陆后，在localStroage中存储该用户的用户名和密码，并跳转到之前访问的资源页面。

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

 

 

posted @ 2019-06-14 11:09  丫丫625202  阅读(503)  评论(0)    收藏  举报