Vue登入功能的實現流程詳解

2022-08-27 22:07:01

Vue專案中實現登入大致思路

1、第一次登入的時候，前端調後端的登陸介面，傳送使用者名稱和密碼

2、後端收到請求，驗證使用者名稱和密碼，驗證成功，就給前端返回一個token

3、前端拿到token，將token儲存到localStorage和vuex中，並跳轉路由頁面

4、前端每次跳轉路由，就判斷 localStroage 中有無 token ，沒有就跳轉到登入頁面，有則跳轉到對應路由頁面

5、每次調後端介面，都要在請求頭中加token

6、後端判斷請求頭中有無token，有token，就拿到token並驗證token，驗證成功就返回資料，驗證失敗（例如：token過期）就返回401，請求頭中沒有token也返回401

7、如果前端拿到狀態碼為401，就清除token資訊並跳轉到登入頁面

用到的關鍵檔案

安裝外掛

npm install axios; // 安裝axios
npm install vuex // 安裝vuex

補充：

建立store是必須的！
token一定要存在storage快取中，否則重新整理一下，store會重新被載入，token就沒了；
那存在store是不是多餘了，這個也是為了資料統一管理吧，也是資料視覺化，因為快取中的資料程式碼中是看不見的。（為了程式碼更容易讓別人理解所以加上vuex，不加也不影響做登入）

建立store

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
// 用Vuex.Store物件用來記錄token
const store = new Vuex.Store({
  state: {
    // 儲存token
    token:"",
    userName:"" // 可選
  },
  getters: {
	getToken(state){
		return state.token || localStorage.getItem("token") || "";
	}
  },
  mutations: {
    // 修改token，並將token存入localStorage
    setToken(state,token) {
      state.token = token;
      localStorage.setItem('token', token);
      console.log('store、localstorage儲存token成功！');
    },
    delToken(state) {
      state.token = "";
      localStorage.removeItem("token");
    },
    // 可選
    setUserInfo(state, userName) {
      state.userName = userName;
    }
  },
 actions: {
   // removeToken: (context) => {
     // context.commit('setToken')
   // }
 },
});
export default store;

參照到main.js

import store from './store'
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

封裝axios

request.js檔案用來封裝我們的axios

qs vue 外掛

裡面有用到qs，這裡我門講解下他的作用：

get方法：我們通過定義一個get函數，get函數有兩個引數，第一個參數列示我們要請求的url地址，第二個引數是我們要攜帶的請求引數。get函數返回一個promise物件，當axios其請求成功時resolve伺服器返回值，請求失敗時reject錯誤值。最後通過export丟擲get函數。

post方法：原理同get基本一樣，但是要注意的是，post方法必須要使用對提交從引數物件進行序列化的操作，所以這裡我們通過node的qs模組來序列化我們的引數。這個很重要，如果沒有序列化操作，後臺是拿不到你提交的資料的。這就是文章開頭我們import QS from ‘qs’;的原因。

簡單來說，qs 是一個增加了一些安全性的查詢字串解析和序列化字串的庫。

在專案中使用命令列工具輸入：npm install qs

安裝完成後在需要用到的元件中：import qs from 'qs’

具體使用中我檢視了：qs.parse()和qs.stringify()

這兩種方法雖然都是序列化，但是還是有區別的。

qs.parse()是將URL解析成物件的形式

qs.stringify()是將物件序列化成URL的形式，以&進行拼接

// 封裝axios
import axios from 'axios'
// 序列化
import QS from 'qs';
// vuex
import store from '../store/index'
//這一步的目的是判斷出當前是開發環境還是生成環境，方法不止一種，達到目的就行
// if(process.env.NODE_ENV=="development"){
//   baseURL=''
// }else{
//   baseURL=''
// }
// 使用自定義的組態檔傳送請求
const instance = axios.create({
    baseURL: '',
    timeout: 80000,
    headers: {
        // 'Content-Type': 'application/json;charset=UTF-8',
        // 'custome-header':'tianliangjiaoyu'
    }
});
// post請求的時候，我們需要加上一個請求頭，所以可以在這裡進行一個預設的設定，即設定post的請求頭為
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
// 新增請求攔截器
instance.interceptors.request.use(function (config) {
    // 每次傳送請求之前判斷vuex中是否存在token        
    // 如果存在，則統一在http請求的header都加上token，這樣後臺根據token判斷你的登入情況
    // 即使本地存在token，也有可能token是過期的，所以在響應攔截器中要對返回狀態進行判斷 
    const token = store.getters.getToken;
    if (token) {
        // 已經登入成功，統一新增token
        config.headers.Authorization = `Bearer ${token}`
    }
    // token && (config.headers.Authorization = token);
    return config;
}, function (error) {
    // 對請求錯誤做些什麼
    return Promise.reject(error);
});
// 這裡說一下token，一般是在登入完成之後，將使用者的token通過localStorage或者cookie存在本地，
// 然後使用者每次在進入頁面的時候（即在main.js中），會首先從本地儲存中讀取token，如果token存在說明使用者已經登陸過，
// 則更新vuex中的token狀態。然後，在每次請求介面的時候，都會在請求的header中攜帶token，
// 後臺人員就可以根據你攜帶的token來判斷你的登入是否過期，如果沒有攜帶，則說明沒有登入過。
// 新增響應攔截器
instance.interceptors.response.use(function (response) {
    if (response.status === 200) {
        return Promise.resolve(response);
    } else {
        return Promise.reject(response);
    }
}, function (error) {
    // 對響應錯誤做點什麼
    if (error.response.status) {
        switch (error.response.status) {
            // 401: 未登入
            // 未登入則跳轉登入頁面，並攜帶當前頁面的路徑
            // 在登入成功後返回當前頁面，這一步需要在登入頁操作。                
            case 401:
                router.replace({
                    path: '/login',
                    query: {
                        redirect: router.currentRoute.fullPath
                    }
                });
                break;
            // 403 token過期
            // 登入過期對使用者進行提示
            // 清除本地token和清空vuex中token物件
            // 跳轉登入頁面                
            case 403:
                this.$message({
                    message: '登入過期，請重新登入',
                    duration: 1000,
                    type: 'success'
                });
                // 清除token
                localStorage.removeItem('token');
                store.commit('loginSuccess', null);
                // 跳轉登入頁面，並將要瀏覽的頁面fullPath傳過去，登入成功後跳轉需要存取的頁面 
                setTimeout(() => {
                    router.replace({
                        path: '/login',
                        query: {
                            redirect: router.currentRoute.fullPath
                        }
                    });
                }, 1000);
                break;
            // 404請求不存在
            case 404:
                this.$message({
                    message: '網路請求不存在',
                    duration: 1500,
                    type: 'success'
                });
                break;
            // 其他錯誤，直接丟擲錯誤提示
            default:
                this.$message({
                    message: error.response.data.message,
                    duration: 1500,
                    type: 'success'
                });
        }
        return Promise.reject(error.response);
    }
});
/** 
 * get方法，對應get請求 
 * @param {String} url [請求的url地址] 
 * @param {Object} params [請求時攜帶的引數] 
 */
export function get(url, params) {
    return new Promise((resolve, reject) => {
        instance.get(url, {
            params: params
        })
            .then(res => {
                resolve(res.data);
            })
            .catch(err => {
                reject(err.data)
            })
    });
}
/** 
 * post方法，對應post請求 
 * @param {String} url [請求的url地址] 
 * @param {Object} params [請求時攜帶的引數] 
 */
export function post(url, params, headers) {
    return new Promise((resolve, reject) => {
        instance.post(url, QS.stringify(params), headers)
            .then(res => {
                resolve(res.data);
            })
            .catch(err => {
                reject(err.data)
            })
    });
}

要注意的是，上面的this.$message方法，是我引入的element庫中的輕提示元件，你根據你的ui庫，對應使用你的一個提示元件。

這裡說一下token，一般是在登入完成之後，將使用者的token通過localStorage或者cookie存在本地，然後使用者每次在進入頁面的時候（即在main.js中），會首先從本地儲存中讀取token，如果token存在說明使用者已經登陸過，則更新vuex中的token狀態。然後，在每次請求介面的時候，都會在請求的header中攜帶token，後臺人員就可以根據你攜帶的token來判斷你的登入是否過期，如果沒有攜帶，則說明沒有登入過。

axios.get()方法和axios.post()在提交資料時引數的書寫方式還是有區別的。區別就是，get的第二個引數是一個{}，然後這個物件的params屬性值是一個引數物件的。而post的第二個引數就是一個引數物件。兩者略微的區別要留意哦！

api.js的作用

這裡我們補充一個知識點：

api檔案的作用就是介面統一管理

這裡我們定義了一個postLogin方法，這個方法有一個引數p，p是我們請求介面時攜帶的引數物件。而後呼叫了我們封裝的post方法，post方法的第一個引數是我們的介面地址，第二個引數是postLogin的p引數，即請求介面時攜帶的引數物件。最後通過export統一匯出apiFun物件

import {get,post} from './request'
let apiFun = null;
apiFun.postLogin = p => post('api/v1/users/my_address/address_edit_before', p)
export default apiFun;

然後在我們的mian.js檔案中定義成全域性變數，方便呼叫

import apiFun from "./network/api";
Vue.prototype.$apiFun = apiFun;//請求介面api

然後在我們的頁面中可以這樣呼叫我們的api介面：

// 呼叫api介面，並且提供了兩個引數                
           this.$apiFun.postLogin({                    
                type: 0,                    
                sort: 1                
            }).then(res => {
                // 獲取資料成功後的其他操作
                ………………                
            })

api介面管理的一個好處就是，我們把api統一集中起來，如果後期需要修改介面，我們就直接在api.js中找到對應的修改就好了，而不用去每一個頁面查詢我們的介面然後再修改會很麻煩.

路由攔截

import Vue from "vue"
import Router from "vue-router"
import Home from '../views/Home.vue'
import store from '../store/index'
Vue.use(Router)
let routes = [
    {
        path: '/',
        name: 'Home',
        component: Home,
        // 重定向
        redirect: '/publiccloud',
        children: [
            {
                path: '/publiccloud',
                name: '公有云使用者管理',
                component: () => import('../views/publicCloud/PublicCloud.vue')
            },
            {
                path: '/admin',
                name: '管理員管理',
                component: () => import('../views/admin/Admin.vue')
            }
        ]
    },
    // 登陸頁面
    {
        path: "/Login",
        name: "登入頁面",
        component: () => import('../views/login/Login.vue')
    },
];
let router = new Router({
    routes,
    mode: 'history',
    // 全域性設定啟用路由的class類名，處與活躍（動態）就會用上這個類名
    linkActiveClass: 'active'
})
// 設定路由守衛，在進頁面之前，判斷有token，才進入頁面，否則返回登入頁面
if (storage.get("token")) {
    store.commit("setToken", localStorage.getItem("token"));
  }
router.beforeEach((to, from, next) => {
    // 設定路由守衛，在進頁面之前，判斷有token，才進入頁面
        if (token) {
            next('/')
        } else {
            // 沒有token就呼叫後端介面，跳轉地址
            getAddress().then((res) => {
              if (res.data.code === 200) {
                location.href = res.data.data.redirectUri
              }
            })
        }
});
export default router

登入頁面實際使用

submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let that = this;
          // console.log('username',this.loginForm.username)
          // 通過校驗規則後進入校驗使用者名稱密碼是否正確
          // 沒有後臺介面可以自定義一個函數來模擬，替換postLogin
          this.$apiFun.postLogin(this.loginForm.username, this.loginForm.password)
            .then(res => {
              console.log(res);
               that.$store.commit("setToken", res.data.token);
               that.$store.commit("setUserInfo", res.data.account);
              this.$notify({
                title: "登入成功",
                type: "success",
                showClose: false,
                duration: 1000
              });
              setTimeout(() => {
                // 此時要判斷/login後面的引數redirect，若無引數，進入主頁；
                this.$router.push("/index");
                // 若有引數則引數為未有許可權的那個路由，跳轉到那個路由
                // this.$router.push(***); -- 具體要自己在這實現
              }, 1000);
            })
            .catch(error => {
            // 錯誤分為 status-請求錯誤 和 code-賬號密碼錯誤
              this.$message.error(error);
              console.log(error);
            });
        } else {
        // 不符合前端校驗
          this.$message.error('format error：'+error);
          console.log('format error：',error);
          return false;
        }
      });
    }

到此這篇關於Vue登入功能的實現流程詳解的文章就介紹到這了,更多相關Vue登入功能內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！