IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 前端vue+token实现用户认证 -> 正文阅读

[JavaScript知识库]前端vue+token实现用户认证


前言

本文主要讨论vue项目中的token认证实现登录功能。涉及到的内容有:Vue3、Vue Router、axios、Vant组件库。

1、Vue3官方文档
2、Vue Router
3、Vant组件库

  • 文章内容主要实现用户登录时记录验证信息于本地,这样设置用户下次再进入页面时就不用重新登录;
  • 设置退出登录的功能,用于清除本地记录的token信息;
  • 设置相应拦截,对于需要授权的请求接口,还未授权则统一去登录界面授权;
  • 访问需要授权才能访问的页面时,如果没有登录,则跳转到登录界面;

提示:以下是本篇文章正文内容,下面案例可供参考

代码展示

1.登录:

const onSubmit = () => {
      //发送登录请求,"Login"为封装的登录请求函数,此处不做过多累述
      Login(userinfo).then((res) => {
        console.log(res.access_token);
        //本地记录验证头信息
        window.localStorage.setItem("token", res.access_token);
        //使用vuex记录登录状态
        store.state.text = true;
        // "Toast"是vant组件库的提示框,提示登录成功并0.5s后返回先前界面
        Toast.success("登录成功");
        setTimeout(() => {
          router.go(-1);
        }, 500);
      });
    };

2.退出登录:

const LogOut = ()=>{
      //"Logout"为封装的退出登录请求函数
      Logout().then(res=>{
        console.log(res);
        //改变登录状态判断
        store.state.text = false;
        //清除本地记录的token
        window.localStorage.setItem('token','')
      })
    };

3.网络请求的请求拦截和相应拦截部分部分:

	//请求拦截
    instance.interceptors.request.use(config => {
        // 如果有一个接口需要认证才可以访问,就在这统一设置
        const token = window.localStorage.getItem('token');

        if (token) {
            config.headers.Authorization = 'Bearer ' + token;
        }
        // 放行
        return config;
    }, err => {
        console.log(err);
    })

    // 响应拦截
    instance.interceptors.response.use(res => {
        return res ? res.data : res;
    }, err => {
        console.log(err);
        // 对于需要授权的请求接口,还未授权则统一去登录页面授权
        // "401" 即未授权,需要请求要求身份验证
        if (err.response.status == '401') {
            Toast.fail('请先登录');
            router.push({ path: '/login' });
        }
        // 如果有错误,这里面会去处理,显示错误信息,"Notify"为vant组件库的轻提醒框
        Notify(err.response.data.errors[Object.keys(err.response.data.errors)[0]][0])
    })

4.路由导航守卫:

router.beforeEach((to, from, next) => {
  //访问需要授权的页面时,如果没有登录,则跳转到登录界面
  if (to.meta.isAuthRequired && store.state.text === false) {
    console.log('未验证,请先登录');
    // "Toast"是vant组件库的提示框,提示未登录并跳转至登录状态
    Toast.fail('您还没有登录,请先登录');
    return next('/login');
  } else {
    console.log('已验证');
    next();
  }
})

提示:文章到此结束,本文仅为个人看法,若有不足欢迎各位指出。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-08-15 15:25:42  更:2021-08-15 15:27:08 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 8:49:58-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码