vue登录成功之后的token处理详细步骤_Vue.js

1、什么是token

token是用户登录成功之后服务端返回的一个身份令牌，在项目中经常要使用。

例如：访问需要授权的api接口、校验页面的访问权限等。

同时，这里我们还需要将token数据进行存储，这样在访问其它的页面组件的时候，就可以获取token数据来进行校验。

2、token数据存储在哪里呢？

第一种情况存储在本地：

存储到本地的问题是，数据不是响应式的。

第二种情况存储到vuex中：

存储到vuex中获取方便，并且是响应式的。但是存储到vuex中也会有问题，就是当我们刷新浏览器的时候，数据就会丢失，所以还是需要把token数据存放到本地，存储到本地的目的就是为了进行持久化。

所以这里我们需要在登录成功以后，把token数据存储到vuex中，这样可以实现响应式，在本地存储就是为了解决持久化的问题。

3.配置vuex

第一步安装最新版本的vuex：

npm install vuex@next --save

第二步在src目录下面创建store目录，在store目录中index.js文件，该文件中的代码如下所示：

import { createstore } from "vuex";
const store = createstore({
  state: {
    //存储当前登录用户信息，包含token等数据
    user: null,
  },
  mutations: {
    setuser(state, data) {
      state.user = data;
    },
  },
});
export default store;

在上面的代码中，创建了store容器，同时指定了state对象，在该对象中定义user属性存储登录用户信息。

在mutations中定义setuser方法，完成用户信息的更新。

下面，要实现的就是，当登录成功以后，更新user这个状态属性。

第三步把store注入到vue的实例中：

import { createapp } from "vue";
import app from "./app.vue";
import vant from "vant";
import "vant/lib/index.css";
import "amfe-flexible";
import "./styles/index.css";
import router from "./router";
import store from "./store"; //导入store
createapp(app).use(vant).use(router).use(store).mount("#app"); //完成store的注册操作

在main.js文件中，我们导入了store,并且注册到了vue实例中。

第四步在登陆页面中，把登录信息存储到store容器中：

import { reactive, torefs, ref } from "vue";
import { login, sendsms } from "../../api/user";
import { toast } from "vant";
import { usestore } from "vuex"; //导入usestore

在代码中导入usestore。

export default {
  setup() {
    const loginform = ref();
    //获取store
    const store = usestore();

在setup函数中，调用usestore方法，获取store容器。

 return {
      ...torefs(user),
      ...usesubmit(user, store),//在调用usesubmit方法的时候传递store容器
      userformrules,
      loginform,
    };

//用户登录
function usesubmit(user, store) {
  const onsubmit = async () => {
    //1、获取表单数据
    //2、表单验证
    //3、提交表单请求
    toast.loading({
      message: "登录中...",
      forbidclick: true, //禁用背景点击
      duration: 0, //持续时间，默认是2000毫秒，如果为0则持续展示
    });
    const res = await login(user);
    if (res.data.code === 0) {
      store.commit("setuser", res.data);
      toast.success("用户登录成功");
    } else {
      toast.fail("用户名或密码错误");
    }

    //4、根据请求响应结果处理后续操作。
  };
  return {
    onsubmit,
  };
}

登录成功以后，获取到返回的数据，同时调用store中的commit方法完成数据的保存

我们虽然把登录成功的数据，存储到vuex中，但是当我们刷新浏览器的时候，vuex中的数据还是会丢失的。所以这里，我们还需要将其存储到本地中。

第五步将token其存储到本地中:

下面修改一下store/index.js文件中的代码：

import { createstore } from "vuex";
const token_key = "toutiao_user";
const store = createstore({
  state: {
    //存储当前登录用户信息，包含token等数据
    // user: null,
    user: json.parse(window.localstorage.getitem(token_key)),
  },
  mutations: {
    setuser(state, data) {
      state.user = data;
      window.localstorage.setitem(token_key, json.stringify(state.user));
    },
  },
});
export default store;

在mutations中的setuser方法中，将登录成功的用户数据存储到了localstorage中，在存储的时候，将数据转成了字符串。

同时在state中获取数据的时候，就从localstorage中获取，当然获取的时候，再将其转换成对象的形式。

4.封装本地存储操作

在我们的项目中，有很多的地方都需要获取本地存储的数据，如果每次都写：

json.parse(window.localstorage.getitem(token_key)),
window.localstorage.setitem(token_key, json.stringify(state.user));

就比较麻烦了。所以这里我们建议把操作本地数据单独的封装到一个模块中。

在utils目录下面创建storage.js文件，该文件中的代码如下所示：

// 存储数据
export const setitem = (key, value) => {
  //将数组，对象类型的数据转换为json格式的字符串进行存储
  if (typeof value === "object") {
    value = json.stringify(value);
  }
  window.localstorage.setitem(key, value);
};
//获取数据
export const getitem = (key) => {
  const data = window.localstorage.getitem(key);
  //这里使用try..catch的，而不是通过if判断一下是否为json格式的字符串，然后在通过parse进行转换呢，目的就是是为了方便处理，因为对字符串进行判断看一下是否为json格式的字符串，比较麻烦一些。还需要通过正则表达式来完成。而通过try..catch比较方便
  // 如果data不是一个有效的json格式字符串，json.parse就会出错。
  try {
    return json.parse(data);
  } catch (e) {
    return data;
  }
};
//删除数据
export const removeitem = (key) => {
  window.localstorage.removeitem(key);

下面返回到store/index.js文件中，修改对应的代码，这里使用我们上面封装好的代码。

import { createstore } from "vuex";
import { getitem, setitem } from "../utils/storage";
const token_key = "toutiao_user";
const store = createstore({
  state: {
    //存储当前登录用户信息，包含token等数据
    // user: null,
    // user: json.parse(window.localstorage.getitem(token_key)),
    user: getitem(token_key),
  },
  mutations: {
    setuser(state, data) {
      state.user = data;
      setitem(token_key, state.user);
      // window.localstorage.setitem(token_key, json.stringify(state.user));
    },
  },
});
export default store;

在上面的代码中，我们导入getitem和setitem两个方法，然后在存储登录用户信息，和获取登录用户信息的时候，直接使用这两个方法，这样就非常简单了。

下面返回浏览器进行测试。

把以前localstorage中存储的内容删除掉。

然后重新输入用户名和密码，发现对应的localstorage中存储了对应的数据。