ログイン操作にグローバルガードを使用
インデックスのルートに対応するルーティングコンポーネントを記述します。
{
path:'/notes',
name:'notes',
component:() => import('@/views/Notes')
},
{
path:'/login',
name:'login',
component:() => import('@/views/Login')
}
新しいログインページとメモページのビューと簡単な書き込み
main.jsのimport以下にglobal guard router.beforeEachを記述します。
localStorage.getItem('user')を使ってローカル情報のuserの値を取得
この値があればそのまま、なければnext('/login')でログイン画面へ。
//グローバル・ガード
router.beforeEach((to, from, next) => {
// console.log(to); 現在のルート情報を表示する
// ユーザーが/notesにアクセスした
if(to.path === '/notes'){
//ログイン情報を取得する
const user = JSON.parse(localStorage.getItem('user'));
if(user){
//ユーザーがログインしている
next();
}else{
//ユーザーがログインしていない ログイン画面に飛ぶ
next('/login');
}
}
next();
})
ログインビューを書く
簡単なログイン画面を書く
<template>
<div>
<h2>ページにログインする</h2>
<input type="text" v-model='user'>
<input type="password" v-model='pwd'>
<button @click = 'handleLogin'> </button>
</div>
</template>
データ属性の書き込み、ユーザー情報の取得、localStorage.setItem()によるユーザー情報のローカル保存、ノートページへのジャンプ
export default {
data() {
return {
user: '',
pwd:''
}
},
methods: {
handleLogin() {
//1.ユーザー名とパスワードを取得する
//2.バックエンドとやりとりする
setTimeout(() => {
let data = {
user:this.user
}
//ユーザー情報をローカルに保存する
localStorage.setItem('user',JSON.stringify(data.user));
//メモのページに飛ぶ
this.$router.push('/notes')
}, 1000);
}
},
}
コンポーネント内部のガード
コンポーネント内部には3つの内部ガードがあります。
beforeRouterEnter(to,from,next){}
追記: thisを呼び出すことはできません。呼び出すと未定義になりますが、このメソッドはインスタンスを取得するコールバック関数を提供します。
beforeRouterUpdate(to,from,next){}
beforeRouterLeave(to,from,next){}
許可制御を実装するためのメタメタ情報
許可制御を実装する必要があるルーティングコンポーネントのインデックスにmetaを追加し、それをtrueに設定するカスタム属性を追加します。
{
path:'/blog',
name:'blog',
component:() => import('@/views/Blog'),
meta:{
//検証対象リストに追加する
requireAuth:true
}
}
main.jsにグローバルガードを設定します。
to.matched.someメソッドで検証すべき条件があるかどうかの判断
必要な認証情報があるかどうかの判断
もしログイン情報がなければ、次の方法でログインページにジャンプします。
router.beforeEach((to, from, next) => {
//sometrue recordがメソッド内のカスタムフォーマル・パラメーターかどうかを判断する
if(to.matched.some(record => record.meta.requireAuth)){
//パーミッションが必要
if(!localStorage.getItem('user')){
next({
path:'/login',
//ログインした後に、ログインしたばかりのページにジャンプして開くために使う。
query:{
redirect: to.fullPath
//フルパス
}
});
}else{
next();
}
}
next();
})
最後に、ログインルートでログインに成功すれば、今ページにジャンプできます。
setTimeout(() => {
let data = {
user:this.user
}
//ユーザー情報をローカルに保存する
localStorage.setItem('user',JSON.stringify(data.user));
//メモのページに飛ぶ
this.$router.push({
path:this.$route.query.redirect
})
ルーティングコンポーネント内のデータ取得
つはナビゲーションが完了する前にデータを取得する場合、もう1つはナビゲーションが完了した後にデータを取得する場合です。
プロジェクトディレクトリに新しいvue.config.jsを追加します。
アナログバックエンドがデータを送信するように設定します。
module.exports = {
devServer:{
before:(app,serve) => {
app.get('/api/post',(req,res) => {
res.json({
title:'Vue-Routerデータ取得」を行う,
body:'1.ナビゲーション完了後にデータを取得する
}) })
} } }
main.jsが導入され、Vueのプロトタイプチェーンに追加されます。
import axios from 'axios'
Vue.prototype.$http = axios;
ポストルーティングコンポーネントの紹介でインデックスを作成し、新しいポストビューを作成します。
ポストへの書き込み.vue
作成時のカスタムメソッドの呼び出し
メソッド内でasyncを使ったカスタムメソッドの呼び出し
データの作成
ページの書き込み
時計によるデータ取得のためのリスニング
<template>
<div class='post'>
<div v-if='loading' class='loading'>
Loading...
</div>
<div v-if='error' class='error'>{{error}}</div>
<div v-if='post'>
<h3> {{post.title}}</h3>
<h4> {{post.body}}</h4>
</div>
</div>
</template>
<script>
export default {
data() {
return {
post: null,
error:null,
loading:false
}
},
created () {
console.log(this.$http);
this.getPostData();
},
//データ取得をリスンする
watch: {
//ルーティングデータが変更されたらデータをリクエストする
$route:'getPostData'
},
methods: {
async getPostData() {
try {
this.loading = true;
const {data} = await this.$http.get('/api/post');
this.loading = false;
this.post = data;
} catch (error) {
this.error = error.toString();
}
}
},
}
</script>
<style lang="scss" scoped></style>
