微信扫一扫 分享朋友圈

已有 134 人浏览分享

开启左侧

如何使用vue实现token登录验证

[复制链接]
134 0
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: ()=>import('../views/Login/Login.vue'),
  },
  // 首页
  {
    path: '/Home',
    name: 'Home',
    component: ()=>import('../views/Home/Home.vue'),
    children:[
      // 新建报表
      {
        path:'/Home/NewReport',
        name:'NewReport',
        component如何使用vue实现token登录验证3843 作者:qqchongx 帖子ID:389 如何,使用,实现,登录,验证)=>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_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
image.png
<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>


免责声明:
1,海欣资源网所发布的资源由网友上传和分享,不保证信息的正确性和完整性,且不对因信息的不正确或遗漏导致的任何损失或损害承担责任。
2,海欣资源网的资源来源于网友分享,仅限用于学习交流和测试研究目的,不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。
3,海欣资源网所发布的资源由网友上传和分享,版权争议与本站无关,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。
4,如果您喜欢,请支持正版,购买正版,得到更好的正版服务,如有侵权,请联系我们删除并予以真诚的道歉,联系方式邮箱 haixinst@qq.com
海欣资源-企业信息化分享平台。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

0

关注

0

粉丝

37

主题
热度排行
回复排行
最新贴子

Archiver|手机版|小黑屋|海欣资源 ( 湘ICP备2021008090号-1 )|网站地图

GMT+8, 2022-10-3 09:51 , Gzip On, MemCache On.

免责声明:本站所发布的资源和文章均来自网络,仅限用于学习交流和测试研究目的,不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。 本站信息来自网络,版权争议与本站无关,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 如果您喜欢,请支持正版,购买正版,得到更好的正版服务,如有侵权,请联系我们删除并予以真诚的道歉。