权限校验-判断用户是否登录

meta 是对于路由规则是否需要验证权限的配置。

在 meta 对象中加入一个标识符（auth），例如：

　　当 meta 对象中的 auth 属性值为true时，表明用户访问该组件时需要登录。

 

全局守卫：router.beforeEach((to, from, next){ });   在进入路由之前调用。

　　通过 auth 的值来判断是否需要登陆，如需要登陆则通过 localStorage 查看浏览器存储中的用户信息是否为空，来判断用户是否已经登陆，如果没有登陆则放行到登录页面。

to：Router：即将要进入的目标路由对象。

from：Router：当前导航正要离开的路由。

next：Function：一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

　　next()放行：进行管道中的下一个钩子。如果全部钩子执行完了，则导航状态就是 confirmed（确认的），如果不放行就会卡住。

编程式导航：在方法内动态的操作路由。this.$router.push('/login')。

案例代码如下：

    <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);" @click='clear'>退出</a>
        <router-view></router-view>
    </div>
    <script type="text/javascript" src="../vue/vue.js"></script>
    <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
    <script type="text/javascript">
        Vue.use(VueRouter);
        // 定义组件
        var Home = {
            template:` 
                <div>我是首页</div>
            `
        }
        var Blog = {
            template:` 
                <div>我是博客</div>
            `
        }
        var Login = {
            template:` 
                <div>
                    <input type="text" v-model='name' />
                    <input type="text" v-model='pwd' />
                    <input type="button" value="登陆" @click='login' />
                </div>
            `,
            data(){
                return{
                    name:'',
                    pwd:''
                }
            },
            methods:{
                login(){
                    localStorage.setItem('user', {name:this.name, 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(); // 如果不调用next就会卡住
            }
        });
        new Vue({
            el:'#app',
            router,
            methods:{
                clear(){
                    localStorage.removeItem('user');
                    this.$router.push('/login')
                }
            }
        });
    </script>