用vue做登录鉴权功能

最新推荐文章于 2024-06-12 10:37:22 发布

superlizhao

最新推荐文章于 2024-06-12 10:37:22 发布

阅读量3.7k

点赞数 4

本文链接：https://blog.csdn.net/superlizhao/article/details/107096900

版权

本文介绍了一个通用的Vue项目登录鉴权功能模板，涉及Login组件、store、router及axios拦截器的设置。登录成功后，将token存储在本地和store中，使用router全局路由守卫判断鉴权状态，并通过axios拦截器处理请求头中的token，服务端中间件对非登录请求检查token，未携带则返回401错误。

摘要由CSDN通过智能技术生成

几乎每个vue项目里都会有登录鉴权功能，本文整理一个通用的登录鉴权功能模板。

通常一个vue项目中与登录鉴权功能有关的部分（文件）有：

store（store.js）

router（router.js）

axios拦截（http-interceptors.js）

　　登录成功后做本地存储和store存储，并进行跳转。

async handleLogin(e) {
    e.preventDefault();
    //获取登录表单值
    let parmas = {
        username: this.model.username,
        passwold: this.model.passwold
    };
    //发送登录异步请求，获取结果集
    const res = await this.$http.get("/api/login", parmas);
    const { code, token, massage } = res.data;
    //code=='0'表示登录成功，进行本地存储和store存储 并进行跳转。
    //else 弹出错误提示
    if (code == "0") {
        this.$store.commit("setToken", res.data.token);
        localStora