Vue中 全局守卫

Vue 全局守卫

使用全局守卫简单举个例子 实现用户是否需要登陆

	<div id="app">
        <router-link to="home">首页</router-link>
        <router-link to="blog">我的博客</router-link>
        <!-- <a href="javascript:viod(0)">退出</a> -->
        <router-view></router-view>
    </div>

创建三个组件 首页、博客、登陆页面

 	var Home = {
        template: `<div>
                        我是首页
                    </div>`
    }
    var Blog = {
        template: `<div>
                        我是博客
                    </div>`
    }
    var Login = {
        data() {
            return {
                name: "",
                psd: ""
            }
        },
        template: `<div>
                        <input type="text" v-model="name"><br>
                        <input type="password" v-model="psd"><br>
                        <input type="button" value="登陆" @click="clickHandler">
                    </div>`,
        methods: {
            clickHandler() {
                var user = [{
                    name: this.name,
                    pass: this.psd
                }];
                // 登陆
                localStorage.setItem("user", JSON.stringify(user));
                // 数据存储王弼跳转博客页面
                // 编程时跳转
                //此时跳转值博客页面，但是该组件的auth属性值为true,
				//所以页面还在当前页面，需要在全局守卫中做判断
                this.$router.push({
                    name: "Blog"
                });
            }
        },
    }

将router挂载在原型上
Vue.use(VueRouter)

路由

	const router = new VueRouter({
        routes: [{
                path: "/",
                redirect: "/home",
            },
            {
                path: "/home",
                component: Home
            },
            {
                path: '/blog',
                name: "Blog",
                component: Blog,
                // meta:给未来路由做权限控制
                meta: {
                    //true: 证明该组件时需要登陆 
                    //false:表明用户已登录
                    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')) { 
                // 如果localStorage不为空，表示用户登陆完成
                // 直接放行
                next();
            } else {
                next({
                    path: "/login"
                })
            }

        } else {
            // 直接放行
            next(); //如果不调用页面会卡住
        }
    })

	new Vue({
        el: "#app",
        router,
    })