【vue】用户登录及token验证登录状态

---

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

一、存储token

通过登录接口获取到token并保存

methods: {
    async onSubmit() {
      try {
        const res = await login(this.data);

        if (res.data.code === 200) {
          // 登录成功,将token存入localStroage中
          localStorage.setItem("apiToken", res.data.msg);
          this.$router.push("/");
        }
      } catch (err) {
        console.log("登录接口： ", err);
      }
    },
  },

二、处理路由

1.修改router/index.js

给路由添加一个状态，然后通过这个状态来判断是否需要token，true需要，false不需要

{
    path: "/home",
    name: "Home",
    component: () => import("@/views/Home"),
    // 添加一个状态
    meta: {
      requireAuth: true,
    },
  },

2.修改main.js

在main.js中,在路由跳转之前,来判断这个页面是否需要登录后才能查看（上一步已经在router中中加了一个requireAuth标识）,如果需要，那么就去判断是否存在token

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    // 判断该路由是否需要登录权限
    const apiToken = localStorage.getItem("apiToken");
    if (apiToken) {
      next();
    } else {
      next({
        path: "/login",
        query: { redirect: to.fullPath },
      });
    }
  } else {
    next();
  }
});

三、设置axios拦截器

在utils/request.js中设置axios拦截器

server.interceptors.request.use(
  (config) => {
    // 取出token
    const apiToken = localStorage.getItem("apiToken");
    if (apiToken) {
      // 如果有token,给请求头设置token
      config.headers.apiToken = apiToken;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

---

总结

大功告成，这时候你想给哪个页面设置权限，直接在路由中设置就行