express + jwt 持久化登陸（vue前端篇）

時間 2019-11-06

標籤 express jwt 持久登陸 vue 前端简体版

原文原文鏈接

jwt 持久化驗證前端篇，node 配置詳情請移步這裏前端

我用的是vue3，下面是 src 的目錄vue

用到的依賴node

驗證思路

Home 頁寫登陸，而後在 About 頁獲取到登陸名。
登陸成功緩存 token，進入About頁時，經過判斷是否有 token 來判斷是否登陸/登陸超時

登陸頁

在登陸頁輸入用戶名和密碼，將其提交到vuexios

// src/views/Home.vue

<template>
  <div class="home">
    <input type="text" v-model="user" placeholder="帳號">
    <input type="text" v-model="password" placeholder="密碼">
    <button @click="login">點擊</button>
  </div>
</template>

<script>
import {mapActions} from 'vuex'
export default {
  data(){
    return{
      user:'',
      password:''
    }
  },
  name: 'home',
  methods:{
    ...mapActions(["toLogin"]),
    login(){
      // 請求以後能拿到用戶名，nickname，把用戶名存在state
      // 傳入多個參數 改爲對象
      // action moutation只能拿第一個參數哦，因此要改爲對象
      this.toLogin({user:this.user,password:this.password})
    }
  }
}
</script>

後臺 jwt

後臺的 jwt 驗證，咱們把過時時間設置成60sweb

// src/app.js

let express = require('express')
let cors = require('cors')
let bodyParser = require('body-parser')
let jwt = require("jsonwebtoken")

let app = express()

app.use(cors())
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended:false}))

// 模擬一個登錄的接口
app.post('/login',function(req,res){
    // 登陸成功獲取用戶名
    let username = req.body.user
    res.json({
        // 進行加密的方法
        // sing 參數一：加密的對象 參數二：加密的規則 參數三：對象
        token:jwt.sign({username:username},'abcd',{
            // 過時時間
            expiresIn:"60s"
        }),
        username,
        code:200
    })
})

// 登陸持久化驗證接口 訪問這個接口的時候 必定要訪問token（前端頁面每切換一次，就訪問一下這個接口，問一下我有沒有登陸/登錄過時）
// 先訪問登陸接口，獲得token，在訪問這個，看是否成功
app.post('/validate',function(req,res){
    let token = req.headers.authorization;
    // 驗證token合法性 對token進行解碼
    jwt.verify(token,'abcd',function(err,decode){
        if(err){
            res.json({
                msg:'當前用戶未登陸'
            })
        }else {
            // 證實用戶已經登陸
            res.json({
                token:jwt.sign({username:decode.username},'abcd',{
                    // 過時時間
                    expiresIn:"60s"
                }),
                username:decode.username,
                msg:'已登陸'
            })
        }
    })
})

app.listen(8000,function(){
    console.log('OK')
})

後臺接口

// src/api/login.js

import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:8000'

// axios 請求攔截
axios.interceptors.request.use(function(response){
    // 在 headers 中設置authorization 屬性放token，token是存在緩存中的
    response.headers.authorization = localStorage["token"]
    return response
}, function (error) {
    return Promise.reject(error);
  })
// axios 響應攔截器
axios.interceptors.response.use(function (response) {
    return response.data;
  }, function (error) {
    return Promise.reject(error);
  });

// 登陸的接口
export let loginApi = (user,password) => {
    return axios.post('/login',{user,password})
}

// 驗證是否登陸的接口
export let valiApi = () => {
    return axios.post('/validate')
}

vuex

// src/store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

import {loginApi,valiApi} from './api/login'

export default new Vuex.Store({
  state: {
    username:""
  },
  mutations: {
    setusername(state,payload){
      // 改變state裏的 username
      state.username = payload
    }
  },
  actions: {
    async toLogin({commit},{user,password}){
      let res = await loginApi(user,password)
      console.log(res)
      let {username,token} = res
      // 提交到 mutations
      commit("setusername",username)
      // token 具備時效性 登陸成功 把token存在本地存儲
      localStorage["token"] = token
    },
    async valiApi({commit}){
      const { username, token } = await valiApi();
      commit('setusername', username);
      localStorage["token"] = token
      return username !== undefined;
    }
  }
})

驗證持久化登陸頁

從 vuex 中拿到用戶名，打開頁面就請求是否登陸的 api ，從而實現持久化登陸驗證vuex

// src/views/About.vue

<template>
  <div class="about">
    暱稱：{{nickname}}
  </div>
</template>

<script>
import {mapState} from "vuex"
import {valiApi} from '../api/login'
export default {
  data(){
    return{
      nickname:''
    }
  },
  computed:{
    ...mapState(["username"])
  },
  // 打開這個頁面 就請求 valiApi  查看用戶是否登陸
  async created(){
    let res = await valiApi();
    console.log(res)
    this.nickname = res.username
    if(res.username !== undefined){
      alert("welcome " + res.username)
    } else {
      alert("請登陸")
    }
  }
}
</script>