<template>
<div>
 <h3>Home 組件</h3>
 <button @click="gotoMovie">跳轉(zhuǎn)到 Movie 頁面</button>
</div>
</template>
<script>
export default {
  name: "",
  methods:{
    gotoMovie(){
      this.$router.push('/movie/1')
    }
  }
}
</script>

<template>
<div>
 <h3>Home 組件</h3>
 <button @click="goBack">退回上一頁</button>
</div>
</template>
<script>
export default {
  props:['id'],
  methods:{
    goBack(){
      this.$router.go(-1)
    }
  }
}
</script>

//App.vue
<template>
  <div>
    <h2>{{ info }}</h2>
    <div>
      <label>
        賬號：<input type="text" v-model.trim="userName" />
      </label>
      <br /><br />
      <label>
        密碼：<input type="password" v-model.trim="passWord" />
      </label>
      <br /><br />
      <button type="button" @click="login">登錄</button>
    </div>
  </div>
</template>
<script type="text/javascript">
import $http from '../axios/index'
export default {
  name: "Login",
  data() {
    return {
      info: '',
      userName: '',
      passWord: '',
    }
  },
  methods: {
    login() {
      //   //對登陸信息進行驗證（實際中在此處進行ajax的請求）
      //   if('lisi' === this.userName && '1234' === this.passWord){
      //     sessionStorage.setItem('isAuth',true) //在頁面緩存中保存isAuth,isAuth=true表示用戶已登錄
      //     this.info = ''
 
      //     //判斷當前路由對象中參數(shù)是否有參數(shù)
      //     if(this.$route.query.redirect){
      //       let redirect =this.$route.query.redirect
      //       this.$router.replace(redirect)//跳轉(zhuǎn)到指定頁面
      //     }
      //     else{
      //       this.$router.replace('/')//若路由對象中沒有redirect，則直接跳轉(zhuǎn)到默認的首頁
      //     }
      //   }else{//非法用戶
      //   sessionStorage.setItem('isAuth',false)
      //   this.userName = ''
      //   this.passWord = ''
      //   this.info = '用戶名或密碼錯誤'
      // }
      $http.post('/test/login', {
        userName: this.userName,
        passWord: this.passWord
      }).then(res => {
        if (res.data.code == 200) {
          sessionStorage.setItem('auth', res.data.tokenInfo)
          this.info = ''
          //判斷當前路由對象中參數(shù)是否有參數(shù)
          if (this.$route.query.redirect) {
            let redirect = this.$route.query.redirect
            this.$router.replace(redirect)//跳轉(zhuǎn)到指定頁面
          }
          else {
            this.$router.replace('/')//若路由對象中沒有redirect，則直接跳轉(zhuǎn)到默認的首頁
          }
        } else {
          sessionStorage.setItem('auth', '')
          this.userName = ''
          this.passWord = ''
          this.info = '用戶名或密碼錯誤'
        }
      })
    }
  }
}
</script>
<style scoped>
</style>

//router/insex.js
//注冊全局前置導(dǎo)航守衛(wèi)
router.beforeEach((to, from, next) => {
    //判斷目標路由是否是/login,如果是，則直接調(diào)用next()方法
    if (to.path == '/login') {
        next()
    } else {//否則判斷用戶是否已經(jīng)登錄,注意這里是字符串判斷
        if (sessionStorage.getItem('auth')!='' && sessionStorage.getItem('auth'!=null)) {
            next()
        } else {//如果用戶訪問的是受保護的資源，且沒有登錄，則跳轉(zhuǎn)到登錄頁面
            //并將當前路由的完整路徑作為查詢參數(shù)傳遞給Login組件，以便登錄成功后返回先前的頁面
            next({//強制跳轉(zhuǎn)到登錄頁面
                path: '/login',
                query:{ redirect:to.fullPath}
            }
            )
        }
    }
})

//前端/App.vue
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
  <br/>  <br/>
  <button @click="login">登錄</button>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <button @click="test">測試攔截器</button>
  </div>
</template>
<script>
import $http from './axios/index'
export default {
  name: 'App',
  methods:{
    login(){
      $http.post('/users/login',{
        userName:'lisi',
        userPwd:'12345'
      }).then(res=>{
        if(res.data.code == 200){
          sessionStorage.setItem('Auth',res.data.mytoken)
        }
      }).catch(err=>{
        console.log(err);
      })
    },
    test(){
      $http.post('/users/test').then(res=>{
        console.log(res.data);
      }).catch(err=>{
        console.log(err);
      })
    }
  }
}
</script>

//前端/index.js
import axios from "axios";
//1. 創(chuàng)建axios的實例，配置基礎(chǔ)路徑
const axiosInstance = axios.create({
    baseURL: 'http://localhost:8089',
    timeout: 5000
})
//2. 定義請求攔截器:給所有請求都帶上token
axiosInstance.interceptors.request.use((req) => {
    let token = sessionStorage.getItem('Auth') //獲取頁面存儲中的token信息
    if (token) { //若token存在
        req.headers['Auth'] = token
    }
    return req;
}, (err) => {
    return Promise.reject(err)
})
// 3.響應(yīng)攔截器：對服務(wù)器響應(yīng)給客戶端的數(shù)據(jù)進行統(tǒng)一的處理
axiosInstance.interceptors.response.use((res) => {
    //1.對響應(yīng)數(shù)據(jù)進行處理
    let result = res.data
    let code = result.code
    if (code == 200) {
        return result
    } else {
        return Promise.reject(result)
    }
}, (err) => {
    return Promise.reject(err)
})
export default axiosInstance

//后臺/usrs.js
var express = require('express');
var router = express.Router();
var jwt = require('jsonwebtoken')
/* http://localhost:8089/users/login */
router.post('/login', (req, res)=>{
  //1.接收客戶的請求數(shù)據(jù)
  let user = {
    name:req.body.userName,
    pwd:req.body.userPwd
  }
  //2.定義密鑰
  let temp = 'baihualin'
  //3.生成token
  let token = jwt.sign(user,temp)
  res.json({
    code:200,
    mytoken:token
  })
} );
/* http://localhost:8089/users/login */
router.post('/test',(req,res)=>{
  //輸出請求頭信息
  console.log(req,headers)
  let arr = [
    {
      bookId:1001,
      bookName:'Vue2從入門到精通',
      publish:'清華大學出版社'
    }, 
    {
      bookId:1002,
      bookName:'Html從入門到放棄',
      publish:'清華大學出版社'
    }, 
    {
      bookId:1003,
      bookName:'Css都是浮云',
      publish:'清華大學出版社'
    }, 
  ]
  res.json(arr)
})
module.exports = router;