前端vue3+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();
  }
})

---

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