vue实现token登录验证的完整实例

目录

token可用于登录验证和权限管理。登录页 -----Login.vue路由守卫 ----- router/index.js封装axios 添加请求拦截器 在每次请求之前进行的操作home页面总结

token可用于登录验证和权限管理。

大致步骤分为：

前端登录，post用户名和密码到后端。后端验证用户名和密码，若通过，生成一个token返回给前端。前端拿到token存储到localStorage管理，登录成功进入首页。之后前端每一次权限操作如跳转路由，都需要判断是否存在token，若不存在，跳转至登录页。前端之后的每一个对后端的请求都要在请求头上带上token，后端查看请求头是否有token，拿到token检查是否过期，返回对应状态给前端。若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>

路由守卫 ----- router/index.js

import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [  // 登录页  {    path: '/',    name: 'Login',    component: jsaHXp()=>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})// 导航守卫// 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆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   创建axios实例const instance = axios.create({baseURL: 'http://192.168.3.6:8082', // api 的 base_urlwithCredentials: false//跨域时使用凭证，默认带上cookies// timeout: 2000, // request timeout  设置请求超时时间  })// 添加请求拦截器，在请求头中加tokeninstance.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>

总结