ToB企服应用市场:ToB评测及商务社交产业平台

标题: vue登录乐成之后的token处理 [打印本页]
作者: 九天猎人    时间: 2024-10-4 10:57
标题: vue登录乐成之后的token处理
1、什么是Token

Token是用户登录乐成之后服务端返回的一个身份令牌，在项目中经常要使用。
比方：访问需要授权的API接口、校验页面的访问权限等。
同时，这里我们还需要将token数据举行存储，这样在访问别的的页面组件的时间，就可以获取token数据来举行校验。
2、token数据存储在哪里呢？

第一种情况存储在本地：
存储到本地的题目是，数据不是响应式的。
第二种情况存储到vuex中：
存储到vuex中获取方便，而且是响应式的。但是存储到vuex中也会有题目，就是当我们刷新浏览器的时间，数据就会丢失，所以照旧需要把token数据存放到本地，存储到本地的目的就是为了举行持久化。
所以这里我们需要在登录乐成以后，把token数据存储到vuex中，这样可以实现响应式，在本地存储就是为了办理持久化的题目。
3.配置vuex

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

  1. npm install vuex@next --save
复制代码
第二步在src目次下面创建store目次，在store目次中index.js文件，该文件中的代码如下所示：

  1. import { createStore } from "vuex";
  2. const store = createStore({
  3.   state: {
  4.     //存储当前登录用户信息，包含token等数据
  5.     user: null,
  6.   },
  7.   mutations: {
  8.     setUser(state, data) {
  9.       state.user = data;
  10.     },
  11.   },
  12. });
  13. export default store;
复制代码
在上面的代码中，创建了store容器，同时指定了state对象，在该对象中界说user属性存储登录用户信息。
在mutations中界说setUser方法，完成用户信息的更新。
下面，要实现的就是，当登录乐成以后，更新user这个状态属性。
第三步把store注入到Vue的实例中：

  1. import { createApp } from "vue";
  2. import App from "./App.vue";
  3. import Vant from "vant";
  4. import "vant/lib/index.css";
  5. import "amfe-flexible";
  6. import "./styles/index.css";
  7. import router from "./router";
  8. import store from "./store"; //导入store
  9. createApp(App).use(Vant).use(router).use(store).mount("#app"); //完成store的注册操作
复制代码
在main.js文件中，我们导入了store,而且注册到了Vue实例中。
第四步在登陆页面中，把登录信息存储到store容器中：

  1. import { reactive, toRefs, ref } from "vue";
  2. import { login, sendSms } from "../../api/user";
  3. import { Toast } from "vant";
  4. import { useStore } from "vuex"; //导入useStore
复制代码
在代码中导入useStore。
  1. export default {
  2.   setup() {
  3.     const loginForm = ref();
  4.     //获取store
  5.     const store = useStore();
复制代码
在setup函数中，调用useStore方法，获取store容器。
  1. return {
  2.       ...toRefs(user),
  3.       ...useSubmit(user, store),//在调用useSubmit方法的时候传递store容器
  4.       userFormRules,
  5.       loginForm,
  6.     };
复制代码
  1. //用户登录
  2. function useSubmit(user, store) {
  3.   const onSubmit = async () => {
  4.     //1、获取表单数据
  5.     //2、表单验证
  6.     //3、提交表单请求
  7.     Toast.loading({
  8.       message: "登录中...",
  9.       forbidClick: true, //禁用背景点击
  10.       duration: 0, //持续时间，默认是2000毫秒，如果为0则持续展示
  11.     });
  12.     const res = await login(user);
  13.     if (res.data.code === 0) {
  14.       store.commit("setUser", res.data);
  15.       Toast.success("用户登录成功");
  16.     } else {
  17.       Toast.fail("用户名或密码错误");
  18.     }
  20.     //4、根据请求响应结果处理后续操作。
  21.   };
  22.   return {
  23.     onSubmit,
  24.   };
  25. }
复制代码
登录乐成以后，获取到返回的数据，同时调用store中的commit方法完成数据的保存
我们虽然把登录乐成的数据，存储到Vuex中，但是当我们刷新浏览器的时间，Vuex中的数据照旧会丢失的。所以这里，我们还需要将其存储到本地中。
第五步将Token其存储到本地中:

下面修改一下store/index.js文件中的代码：
  1. import { createStore } from "vuex";
  2. const TOKEN_KEY = "TOUTIAO_USER";
  3. const store = createStore({
  4.   state: {
  5.     //存储当前登录用户信息，包含token等数据
  6.     // user: null,
  7.     user: JSON.parse(window.localStorage.getItem(TOKEN_KEY)),
  8.   },
  9.   mutations: {
  10.     setUser(state, data) {
  11.       state.user = data;
  12.       window.localStorage.setItem(TOKEN_KEY, JSON.stringify(state.user));
  13.     },
  14.   },
  15. });
  16. export default store;
复制代码
在mutations中的setUser方法中，将登录乐成的用户数据存储到了localStorage中，在存储的时间，将数据转成了字符串。
同时在state中获取数据的时间，就从localStorage中获取，当然获取的时间，再将其转换成对象的形式。
4.封装本地存储操纵

在我们的项目中，有很多的地方都需要获取本地存储的数据，如果每次都写：
  1. JSON.parse(window.localStorage.getItem(TOKEN_KEY)),
  2. window.localStorage.setItem(TOKEN_KEY, JSON.stringify(state.user));
复制代码
就比力贫苦了。所以这里我们建议把操纵本地数据单独的封装到一个模块中。
在utils目次下面创建storage.js文件，该文件中的代码如下所示：
  1. // 存储数据
  2. export const setItem = (key, value) => {
  3.   //将数组，对象类型的数据转换为JSON格式的字符串进行存储
  4.   if (typeof value === "object") {
  5.     value = JSON.stringify(value);
  6.   }
  7.   window.localStorage.setItem(key, value);
  8. };
  9. //获取数据
  10. export const getItem = (key) => {
  11.   const data = window.localStorage.getItem(key);
  12.   //这里使用try..catch的，而不是通过if判断一下是否为json格式的字符串，然后在通过parse进行转换呢，目的就是是为了方便处理，因为对字符串进行判断看一下是否为json格式的字符串，比较麻烦一些。还需要通过正则表达式来完成。而通过try..catch比较方便
  13.   // 如果data不是一个有效的json格式字符串，JSON.parse就会出错。
  14.   try {
  15.     return JSON.parse(data);
  16.   } catch (e) {
  17.     return data;
  18.   }
  19. };
  20. //删除数据
  21. export const removeItem = (key) => {
  22.   window.localStorage.removeItem(key);
复制代码
下面返回到store/index.js文件中，修改对应的代码，这里使用我们上面封装好的代码。
  1. import { createStore } from "vuex";
  2. import { getItem, setItem } from "../utils/storage";
  3. const TOKEN_KEY = "TOUTIAO_USER";
  4. const store = createStore({
  5.   state: {
  6.     //存储当前登录用户信息，包含token等数据
  7.     // user: null,
  8.     // user: JSON.parse(window.localStorage.getItem(TOKEN_KEY)),
  9.     user: getItem(TOKEN_KEY),
  10.   },
  11.   mutations: {
  12.     setUser(state, data) {
  13.       state.user = data;
  14.       setItem(TOKEN_KEY, state.user);
  15.       // window.localStorage.setItem(TOKEN_KEY, JSON.stringify(state.user));
  16.     },
  17.   },
  18. });
  19. export default store;
复制代码
在上面的代码中，我们导入getItem和setItem两个方法，然后在存储登录用户信息，和获取登录用户信息的时间，直接使用这两个方法，这样就非常简朴了。
下面返回浏览器举行测试。
把从前localStorage中存储的内容删除掉。
然后重新输入用户名和暗码，发现对应的localStorage中存储了对应的数据。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4