摘要：兩步教你在Vue中設定登入驗證攔截！

本文分享自華為雲社群《兩步教你在Vue中設定登入驗證攔截！》，作者： 灰小猿 。

今天在做vue和springboot互動的一個專案的時候，想要基於前端實現一些只有登入驗證之後才能訪問某些頁面的操作，所以在這裡總結一下實現該功能的一個解決方案。

首先說一下我是如何判斷是否已經登入的，

一、解決思路

由於在我的springboot後臺採用的shiro+Jwt安全框架，所以會在登入之後反饋給前端一個token，並且前端會將該token進行儲存，所以我是去查詢瀏覽器中是否存在token，如果瀏覽器中存在token，則說明登入成功，可以訪問相關頁面；

如果沒有token則說明沒有登入，j就跳轉到登入頁面。為了簡化操作，我將這個驗證的過程進行了封裝。

注意：使用這種方法進行驗證的前提是你的前後端是通過shiro和token進行驗證的，並且前端會儲存伺服器返回的token。

二、讓瀏覽器儲存伺服器返回的token

首先來看一下伺服器端返回的token是如何被我在前端頁面中儲存的。

首先我在store檔案下的index.js檔案中封裝了一個SET_TOKEN方法，用來將token儲存到瀏覽器，這樣我們每次就都可以通過localStorage.getItem(“token”),來從本地拿到我們的token，同時封裝了一個REMOVE_INFO方法，在當我們退出登入的時候，清空瀏覽器中的token資訊。

store檔案下的index.js中程式碼如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        // token: "",
        //使用者的資訊可以直接從瀏覽器中取出來
        token: localStorage.getItem("token"),
        //反序列化操作
        userInfo: JSON.parse(sessionStorage.getItem("userInfo"))
    },
    mutations: {
        
 
/**類似set操作*/
        //給token賦值
        SET_TOKEN: (state, token) => {
            state.token = token;
            //將資訊儲存到瀏覽器中，以至於瀏覽器關閉時資訊還在
            localStorage.setItem("token", token);
        },
        //給userinfo賦值
        SET_USERINFO: (state, userInfo) => {
            state.userInfo = userInfo;
            //session會在每次瀏覽器關閉時清空，在重新登入後再生成
            //由於sessionStorage不能儲存物件，所以要將其儲存成字串的形式
            sessionStorage.setItem("userInfo", JSON.stringify(userInfo));
        },
        //移除使用者資訊
        REMOVE_INFO: (state) => {
            //移除使用者資訊時將使用者所有的資訊都置為空
            state.token = "";
            state.userInfo = {};
            localStorage.setItem("token", "");
            sessionStorage.setItem("userInfo", JSON.stringify(""));
        }

    },
    getters: {
        /**類似get請求*/
        //獲取使用者資訊
        getUser: state => {
            return state.userInfo;
        }
    },
    actions: {},
    modules: {}
})

三、在請求中設定訪問許可權

由於我們並不是所有的頁面都只要在登入的時候才能訪問，所以我們要對需要進行登入才能訪問的頁面設定訪問許可權，

在vue中我們一般將訪問路由設定在router下的index.js檔案中，對於需要添登入許可權的請求路由，我們可以給其增加meta屬性，在其中設定一個Boolean型別的屬性requireAuth，我們會以該屬性是否為true來判斷是否需要驗證登入。

比如我們的BlogEdit頁面只有在登入的時候才能訪問，Login頁面不需要登許可權，那麼我們就可以這樣設定：（程式碼有刪減，但是保留了核心部分，只是刪除了部分路由。）

/**
 * 路由註冊中心
 */

import Vue from 'vue'
import VueRouter from 'vue-router'
//註冊頁面
import Login from '../views/Login.vue'
import BlogEdit from '../views/BlogEdit.vue'
Vue.use(VueRouter)

const routes = [
    {
        path: '/login',
        name: 'Login',
        component: Login
    },
    {
        path: '/blog/add',
        name: 'BlogAdd',
        component: BlogEdit,
        //新增許可權訪問，表示只有登入之後才能進行該操作
        meta: {
            requireAuth: true
        }
    },
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

這樣在每次請求BlogEdit頁面的時候都會進行判斷。

四、封裝登入驗證

現在我們需要寫一個方法來對我們剛才設定的屬性進行驗證。所以在src目錄下新建一個permission.js檔案，在其中進行封裝。

思路是這樣的：首先我們攔截該請求，獲取到該請求中的requireAuth引數，如果引數是true，那麼就去獲取瀏覽器中的token，驗證當前是否是登入狀態。如果存在token，就放行請求；如果沒有獲取到token，就跳轉到登入頁面。

注意：如果你是基於其他驗證登入的，可以將//獲取到本地的token
const token =ocalStorage.getItem(“token”)
換成你的驗證方式，但是思路都是一樣的。

程式碼如下：

/**
 * 請求登入驗證，如果沒有登入，不能訪問頁面，返回到登入頁面
 */
import router from "./router";

//路由判斷登入，根據路由配置檔案的引數
router.beforeEach((to,from,next)=>{
    //判斷該路由是否需要登入許可權
    //record.meta.requireAuth是獲取到該請求中攜帶的該引數
    if (to.matched.some(record => record.meta.requireAuth)){
        //獲取到本地的token
        const token = localStorage.getItem("token")
        console.log("顯示token----------：" + token)

        //判斷當前的token是否存在，也就是登入時的token
        if (token){
            //如果指向的是登入頁面，不做任何操作
            if (to.path === "/login"){

            }else {
                //如果不是登入頁面，且token存在，就放行
                next()
            }
        }else {
        //    如果token不存在
        //    前往登入
            next({path:'/login'})
        }

    }else {
        //如果不需要登入認證，就直接訪問
        next()
    }
})

最後別忘了將該頁面引入到mian.js中。

//匯入permission.js，使用者進行前端的許可權控制
import "./permission"

總結一下

主要的操作就是第三步和第四步，只要你在請求路由中設定了登入驗證的引數，同時第四步寫入了登入攔截驗證，並且引入到的main.js檔案中，就可以了！

至此通過前端驗證登入攔截完成。

點選關注，第一時間瞭解華為雲新鮮技術~