vue實現(xiàn)token登錄驗證的完整實例

更新時間：2022年04月22日 16:17:55 作者：懶啦

最近公司新啟動了個項目，用的是vue框架在做,下面這篇文章主要給大家介紹了關于vue實現(xiàn)token登錄驗證的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

token可用于登錄驗證和權限管理。

大致步驟分為：

前端登錄，post用戶名和密碼到后端。
后端驗證用戶名和密碼，若通過，生成一個token返回給前端。
前端拿到token存儲到localStorage管理，登錄成功進入首頁。
之后前端每一次權限操作如跳轉路由，都需要判斷是否存在token，若不存在，跳轉至登錄頁。
前端之后的每一個對后端的請求都要在請求頭上帶上token，后端查看請求頭是否有token，拿到token檢查是否過期，返回對應狀態(tài)給前端。
若token已過期，清除token信息，跳轉至登錄頁。

登錄頁 -----Login.vue

<template>
  <!-- 登錄 -->
  <div>
    <el-container>
      <el-main>
        <div class="box">
          <el-form
            :model="user"
            :rules="rules"
            ref="user"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="用戶名" prop="email">
              <el-input v-model="user.email"></el-input>
            </el-form-item>
            <el-form-item label="密碼" prop="pass">
              <el-input type="password" v-model="user.password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="login">登錄</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {LoginPostData} from '../../api/index'  // 后端登錄接口
export default {
  data() {
    return {
      rules: {
        email: [
          { required: true, message: "請輸入用戶名", trigger: "blur" },
          { min: 3, max: 20, message: "長度在 3 到 20 個字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "請輸入密碼", trigger: "blur" },
          { min: 3, max: 5, message: "長度在 3 到 5 個字符", trigger: "blur" },
        ],
      },
      user:{
        email:'',
        password:''
      },
      userToken:'', // 用于存儲從后臺獲取的token
    };
  },
  methods:{
      login(){
      // 登錄接口
      LoginPostData(this.user.email,this.user.password)
      .then((res)=>{ 
      // 將token存到userToken中     
        this.userToken = res.data.data.token
        // 將token本地存儲到回話中
        localStorage.setItem('token', this.userToken);
        // 如果code為200則跳轉到NewReport頁面
        if(res.data.code === 200){
        this.$router.push({name:'NewReport'})
        this.$message({
          message: '恭喜你，登錄成功',
          type: 'success'
        });
        }else{
          this.$message.error(res.data.data);
        }
      })
      .catch(err=>{
        console.log(err);
      })
      }
  },
};
</script>

路由守衛(wèi) ----- router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
const routes = [
  // 登錄頁
  {
    path: '/',
    name: 'Login',
    component: ()=>import('../views/Login/Login.vue'),
  },
  // 首頁
  {
    path: '/Home',
    name: 'Home',
    component: ()=>import('../views/Home/Home.vue'),
    children:[
      // 新建報表
      {
        path:'/Home/NewReport',
        name:'NewReport',
        component:()=>import('../views/Home/NewReport.vue')
      },
    ]
  },
]

const router = new VueRouter({
  routes
})

// 導航守衛(wèi)
// 使用 router.beforeEach 注冊一個全局前置守衛(wèi)，判斷用戶是否登陸
router.beforeEach((to, from, next) => {
//如果去往登錄頁則放行 
  if (to.path === '/') {
    next();
  } else {
    // 從本地存儲里獲取token
    let token = localStorage.getItem('token');
    // 判斷token是否為空如果為空則跳轉到登錄頁 如果有則放行
    if (token === null || token === '') {
      next({path:'/'});
    } else {
      next();
    }
  }
});

export default router

封裝axios 添加請求攔截器在每次請求之前進行的操作

在請求頭中添加token ---- api/request.js

// 請求
import axios from 'axios'

// create an axios instance   創(chuàng)建axios實例
const instance = axios.create({
	baseURL: 'http://192.168.3.6:8082', // api 的 base_url
	withCredentials: false//跨域時使用憑證，默認帶上cookies
	// timeout: 2000, // request timeout  設置請求超時時間
  })

// 添加請求攔截器，在請求頭中加token
instance.interceptors.request.use(
  config => {
  //判斷token是否存在
    if (localStorage.getItem('token')) {
    // 在請求頭中添加token
      config.headers.token = localStorage.getItem('token');
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  });

export default instance

注意：

鬼知道我當時為了這個找了多半天哭死

home頁面

<template>
  <div>
    <el-link icon="el-icon-switch-button" @click="tuichu">退出登錄</el-link>
  </div>
</template>

<script>
export default {
    methods: {
    // 退出
    tuichu() {
      //退出登錄，清空token
      localStorage.removeItem('token');
      this.$router.push({ name: "Login" });
    },
  },
};
</script>