<commit_before><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <router-link to="/top">トップページ</router-link>
    <router-link to="/users">ユーザー一覧</router-link>
    <router-link :to="{name:'user', params:{userId:123}}">ユーザー詳細</router-link>
    <router-view></router-view>
</div>

<script src="https://cdn.jsdelivr.net/vue/2.0.3/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/vue.router/2.0.1/vue-router.min.js"></script>
<script>
    // 擬似的にAPI経由で情報を取得したようにする
    var getUsers = function (callback) {
        setTimeout(function () {
            callback(null, [
                {
                    id: '001',
                    name: '<NAME>'
                },
                {
                    id: '002',
                    name: '<NAME>'
                }
            ])
        }, 1000)
    };
    var UserList = {
        // HTML上のscriptタグのidを指定する
        template: '#user-list',
        data: function () {
            return {
                loading: false,
                // 初期値の空配列を定義
                users: function () {
                    return []
                },
                error: null
            }
        },

        // 初期化時にデータを取得する
        created: function () {
            this.fetchData()
        },

        // ルーティングが変更された時に再度データを取得するために$routeの変更をwatchする
        watch: {
            '$route': 'fetchData'
        },

        methods: {
            fetchData: function () {
                this.loading = true;
                // 取得したデータの結果をusersに格納する
                getUsers((function (err, users) {
                    this.loading = false;
                    if (err) {
                        this.error = err.toString()
                    } else {
                        this.users = users
                    }
                }).bind(this))
            }
        }
    };

    var User = {
        template: '<div class="user">' +
        '<h2>ユーザーIDは {{ $route.params.userId }} です。</h2>' +
        '<router-link :to="\'/users/\' + $route.params.userId + \'/profile\'">ユーザーのプロフィールページを見る</router-link>' +
        '<router-link :to="\'/users/\' + $route.params.userId + \'/posts\'">ユーザーの投稿ページを見る</router-link>' +
        '<router-view></router-view>' +
        '</div>'
    };

    var UserProfile = {
        template: '<div class="user-profile">' +
        '<h3>こちらはユーザー {{ $route.params.userId }} のプロフィールページです。</h3>' +
        '</div>'
    };
    var UserPosts = {
        template: '<div class="user-posts">' +
        '<h3>こちらはユーザー {{ $route.params.userId }} の投稿ページです。</h3>' +
        '</div>'
    };
    var router = new VueRouter({
        routes: [
            {
                path: '/top',
                component: {
                    template: '<div>トップページです</div>'
                }
            },
            {
                path: '/users',
                component: UserList,
                beforeEnter: function (to, from, next) {
                    console.log(to.query.redirect);
                    if (to.query.redirect == true) {
                        next('/top')
                    } else {
                        next()
                    }
                }
            },
            {
                path: '/users/:userId',
                name: 'user',
                component: User,
                children: [
                    {
                        path: 'profile',
                        component: UserProfile
                    },
                    {
                        path: 'posts',
                        component: UserPosts
                    }
                ]
            }
        ]
    });

//    router.beforeEach(function (to, from, next) {
//        console.log(to.path);
//        // ユーザー一覧ページへアクセスした時に/topへリダイレクトする例
//        if (to.path === '/users') {
//
//            next('/top')
//        } else {
//            // 引数なしでnextを呼び出すと通常通りの遷移が行われる
//            next()
//        }
//    });
    var app = new Vue({
        router: router
    }).$mount('#app');
</script>
<script type="x-template" id="user-list">
    <div>
        <div class="loading" v-if="loading">ロード中...</div>
        <div v-if="error" class="error">
            {{ error }}
        </div>
        <!-- usersがロードされたら各ユーザーの名前を表示する -->
        <div v-for="user in users" :key="user.id">
            <h2>{{ user.name }}</h2>
        </div>
    </div>
</script>
</body>
</html><commit_msg>簡易認証付きSPAの実装<commit_after><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <router-link to="/top">トップページ</router-link>
    <router-link to="/users">ユーザー一覧</router-link>
    <router-link :to="{name:'user', params:{userId:123}}">ユーザー詳細</router-link>
    <router-view></router-view>
</div>

<script src="https://cdn.jsdelivr.net/vue/2.0.3/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/vue.router/2.0.1/vue-router.min.js"></script>
<script>
    // 擬似的にAPI経由で情報を取得したようにする
    var getUsers = function (callback) {
        setTimeout(function () {
            callback(null, [
                {
                    id: '001',
                    name: '<NAME>'
                },
                {
                    id: '002',
                    name: '<NAME>'
                }
            ])
        }, 1000)
    };

    var Auth = {
        login: function (email, pass, cb) {
            setTimeout(function () {
                if (email === '<EMAIL>' && pass === '<PASSWORD>') {
                    localStorage.token = Math.random().toString(36).substring(7)
                    if (cb) {
                        cb(true)
                    }
                } else {
                    if (cb) {
                        cb(false)
                    }
                }
            }, 0)
        },
        logout: function () {
            delete localStorage.token;
        },
        loggedIn: function () {
          return !!localStorage.token;
        }

    };
    var Login = {
        template: '#login',
        data: function () {
            return {
                email: '<EMAIL>',
                pass: '',
                error: false
            }
        },
        methods: {
            login: function () {
                Auth.login(this.email, this.pass, (function (loggedIn) {
                    if (!loggedIn) {
                        this.error = true
                    } else {
                        this.$router.replace(this.$route.query.redirect || '/')
                    }
                }).bind(this))
            }
        }
    }
    var UserList = {
        // HTML上のscriptタグのidを指定する
        template: '#user-list',
        data: function () {
            return {
                loading: false,
                // 初期値の空配列を定義
                users: function () {
                    return []
                },
                error: null
            }
        },

        // 初期化時にデータを取得する
        created: function () {
            this.fetchData()
        },

        // ルーティングが変更された時に再度データを取得するために$routeの変更をwatchする
        watch: {
            '$route': 'fetchData'
        },

        methods: {
            fetchData: function () {
                this.loading = true;
                // 取得したデータの結果をusersに格納する
                getUsers((function (err, users) {
                    this.loading = false;
                    if (err) {
                        this.error = err.toString()
                    } else {
                        this.users = users
                    }
                }).bind(this))
            }
        }
    };

    var User = {
        template: '<div class="user">' +
        '<h2>ユーザーIDは {{ $route.params.userId }} です。</h2>' +
        '<router-link :to="\'/users/\' + $route.params.userId + \'/profile\'">ユーザーのプロフィールページを見る</router-link>' +
        '<router-link :to="\'/users/\' + $route.params.userId + \'/posts\'">ユーザーの投稿ページを見る</router-link>' +
        '<router-view></router-view>' +
        '</div>'
    };

    var UserProfile = {
        template: '<div class="user-profile">' +
        '<h3>こちらはユーザー {{ $route.params.userId }} のプロフィールページです。</h3>' +
        '</div>'
    };
    var UserPosts = {
        template: '<div class="user-posts">' +
        '<h3>こちらはユーザー {{ $route.params.userId }} の投稿ページです。</h3>' +
        '</div>'
    };
    var router = new VueRouter({
        routes: [
            {
                path: '/top',
                component: {
                    template: '<div>トップページです</div>'
                }
            },
            {
                path: '/users',
                component: UserList,
                beforeEnter: function (to, from, next) {
                    console.log(to.query.redirect);
                    if (to.query.redirect == true) {
                        next('/top')
                    } else {
                        next()
                    }
                }
            },
            {
                path: '/users/:userId',
                name: 'user',
                component: User,
                beforeEnter: function(to, from, next) {
                    if(!Auth.loggedIn()) {
                        next({
                            path: '/login',
                            query:{ redirect: to.fullPath}
                        });
                    } else {
                        next();
                    }
                },
                children: [
                    {
                        path: 'profile',
                        component: UserProfile
                    },
                    {
                        path: 'posts',
                        component: UserPosts
                    }
                ]
            },
            {
                path: '/login',
                component: Login
            },
            {
                path: '/logout',
                beforeEnter: function (to, from, next) {
                    Auth.logout();
                    next('/')
                }
            }
        ]
    });

    //    router.beforeEach(function (to, from, next) {
    //        console.log(to.path);
    //        // ユーザー一覧ページへアクセスした時に/topへリダイレクトする例
    //        if (to.path === '/users') {
    //
    //            next('/top')
    //        } else {
    //            // 引数なしでnextを呼び出すと通常通りの遷移が行われる
    //            next()
    //        }
    //    });
    var app = new Vue({
        router: router
    }).$mount('#app');
</script>
<script type="x-template" id="user-list">
    <div>
        <div class="loading" v-if="loading">ロード中...</div>
        <div v-if="error" class="error">
            {{ error }}
        </div>
        <!-- usersがロードされたら各ユーザーの名前を表示する -->
        <div v-for="user in users" :key="user.id">
            <h2>{{ user.name }}</h2>
        </div>
    </div>
</script>
<script type="x-template" id="login">
    <div>
        <h2>Login</h2>
        <p v-if="$route.query.redirect">
            ログインしてください
        </p>
        <form @submit.prevent="login">
            <label><input v-model="email" placeholder="email"></label>
            <label><input v-model="pass" placeholder="password" type="password"></label><br>
            <button type="submit">ログイン</button>
            <p v-if="error" class="error">ログインに失敗しました</p>
        </form>
    </div>
</script>
</body>
</html>
{'fraction_non_alphanumeric': 0.1528422527809407, 'fraction_numerical': 0.005430498379609354, 'mean_word_length': 1.0587811034980166, 'pattern_counts': {'":': 0, '<': 149, '<?xml version=': 0, '>': 149, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7006826', 'n_tokens_mistral': 3676, 'n_tokens_neox': 3539, 'n_words': 526}