vue尚品汇商城项目-day05【33.token令牌理解+34.用户登录携带token获取用户信息+35.退出登录】

末蓝、 2024-03-24 13:18 17阅读 0赞

![在这里插入图片描述][201cb7e59bb94276b20be0c55371360b.jpeg_pic_center]

#### 文章目录 ####

*   *  33.token令牌理解
     *  34.用户登录携带token获取用户信息
     *  35.退出登录
 *  本人其他相关文章链接

### 33.token令牌理解 ###

【令牌：字符串，服务器下发给用户的身份凭证】  
举例子:古代大战，兵符

### 34.用户登录携带token获取用户信息 ###

登陆之前展示效果：

![在这里插入图片描述][e616dbc2c6664416a88dc3c0e3929702.png_pic_center]

登陆成功后展示效果：

![在这里插入图片描述][0430658eaea5476dbacbd31d71ea7246.png_pic_center]

修改代码：

> src/api/index.js

//获取用户信息【需要带着用户的token向服务器要用户信息】
    //URL:/api/user/passport/auth/getUserInfo  method:get
    export const reqUserInfo = ()=>requests({url:'/user/passport/auth/getUserInfo',method:'get'});

> src/api/axios.js

//需要携带token带给服务器
    if(store.state.user.token){
            //请求头添加一个字段(userTempId):和后台老师商量好了
            config.headers.token = store.state.user.token;
        }

> src/store/loginAndRegister/index.js

import {reqUserInfo} from "@/api";
    import {setToken, getToken} from "@/utils/token";
    
    //用户登录
    async reqUserLogin({commit}, data) {
    	...
    	setToken(response.data.token);
    	...
    }
    
    //获取用户信息
        async reqUserInfo({commit}) {
            let response = await reqUserInfo();
            console.log("******获取用户信息-response:{}", response);
            if (response.code == 200) {
                //用户已经登录成功且获取到token
                commit('REQ_USER_INFO', response.data);
                //返回的是成功的标记
                return "OK";
            } else {
                //返回的是失败的标记
                return Promise.reject(new Error(response.message))
            }
        },
        
    REQ_USER_INFO(state, userInfo) {
            state.userInfo = userInfo;
        },
        
    userInfo: {}, 
    token: getToken(),

> src/pages/Home/index.vue

mounted() {
    	this.$store.dispatch('reqUserInfo');
    }

> src/components/Header/index.vue

请
 
 <router-link to="/login">登录</router-link>
 <router-link to="/register" class="register">免费注册</router-link>
 
 
 
 <a>{
 {userName}}</a>
 <a class="register">退出登录</a>
 
 
 computed: {
 	//用户名信息
 userName() {
 return this.$store.state.user.userInfo.name
 }
 }

> src/utils/token.js

//存储token
    export const setToken = (token) => {
        localStorage.setItem("TOKEN", token);
    };
    //获取token
    export const getToken = () => {
        return localStorage.getItem("TOKEN");
    };

注意点1：

> 问题：哪里派发“获取用户信息”action呢？

答案：在Home组件挂在完毕时派发，因为登录成功后会跳转到Home组件中。

注意点2：

> 问题：登陆成功后，在Home组件中左上角展示应该有所不同。

登陆之前展示效果：

![在这里插入图片描述][d3fe79a73ca74b03b0f96b436d16c6dd.png_pic_center]

登陆成功后展示效果：

![在这里插入图片描述][d233ae12f8c54914835909ee1f576ed4.png_pic_center]

答案：给/

标签添加v-if和v-else，进行控制显隐。

注意点3：获取用户信息需要在header中传递token，否则后端不认识是谁。因此需要在src/api/axios.js文件中在请求头header中补充token信息。

注意点4：

> 问题：一刷新，刚刚已经登陆过的用户左上角展示信息又没了，为啥？具体效果如图：

![在这里插入图片描述][5f6d7510dde84f80948af1e1727a9189.gif_pic_center]

答案：因为vuex中存储的信息是非持久化的，所以需要用到持久化存储技术去存储token信息。

注意点5：

> 问题：在Home组件中刷新也能显示用户信息了，但是跳转到其他组件比如【详情组件|搜索组件】中发现又没了？为啥？

答案：因为派发“获取用户信息”action只放在了Home组件挂在完毕时触发。

假设方案1：那如果每个组件都拷贝一份派发“获取用户信息”action呢，是可以达到效果，但你每个组件都写太费事且万一遗漏一个就出显示问题了；

假设方案2：那如果放在父组件APP组件中派发action呢？答案也不行，因为APP组件只会加载一次，登录后刷新才会展示用户信息，但不刷新还是不显示，明显该方案也不对。

最终的方案：使用“导航守卫-全局守卫”解决问题，并把Home组件中派发“获取用户信息”action删除，一切都放在“导航守卫”中解决。详情请看知识点“36.导航守卫理解”

注意点6：

> 问题：用户已经登录了，就不应该再能够返回登录页。

答案：最终的方案：使用“导航守卫-全局守卫”解决问题。详情请看知识点“36.导航守卫理解”

### 35.退出登录 ###

修改代码：

> src/api/index.js

//退出登录
    //URL:/api/user/passport/logout  get
    export const reqLogout = ()=> requests({url:'/user/passport/logout',method:'get'});

> src/store/loginAndRegister/index.js

import {reqLogout} from "@/api";
    import {removeToken} from "@/utils/token";
    
    const actions = {
    	//用户退出
        async reqLogout({commit}) {
            //只是向服务器发起一次请求，通知服务器清除token
            let response = await reqLogout();
            console.log("******用户退出-response:{}", response);
            //服务器下发token，用户唯一标识符(uuid)
            //将来经常通过带token找服务器要用户信息进行展示
            if (response.code == 200) {
                //用户已经登录成功且获取到token
                commit('REQ_USER_LOGOUT');
                //返回的是成功的标记
                return "OK";
            } else {
                //返回的是失败的标记
                return Promise.reject(new Error(response.message))
            }
        },
    }
    
    const mutations = {
    	//清除本地数据
        REQ_USER_LOGOUT(state) {
            //帮仓库中相关用户信息清空
            state.token = '';
            state.userInfo = {};
            //本地存储数据清空
            removeToken();
        },
    }
    
    const state = {
    	token: getToken(),
    }

> src/utils/token.js

//清除本地存储的token
    export const removeToken=()=>{
        localStorage.removeItem("TOKEN");
    }

> src/components/Header/index.vue

<a class="register" @click="logout">退出登录</a>
 
 //退出登录
 async logout() {
 /**
 * 退出登录需要做的事情：
 * 1:需要发请求，通知服务器退出登录【清除一些数据：token】
 * 2:清除项目当中的数据【userInfo、token】
 * 3.成功退出后跳转到/home页
 */
 try {
 //成功
 await this.$store.dispatch('reqLogout');
 this.$router.push("/home")
 } catch (error) {
 //失败
 alert(error.message)
 }
 }

注意点1：

> 问题：退出登录后刷新页面，报错如图，为啥？

![在这里插入图片描述][bafe05a622044df4b3fea647d731447a.png_pic_center]

答案：派发"获取用户信息"action需要header中传入token，然后token默认为空串且只有在用户登录下才会给token赋值，所以当刷新Home页派发"获取用户信息"action时由于token没有值，所以查询接口结果报错。

注意点2：

> 问题：思考退出登录都需要干什么？

答案：3件事情：

1.  需要发请求，通知服务器退出登录【清除一些数据：token】
2.  清除项目当中的数据【userInfo、token】
3.  成功退出后跳转到/home页

## 本人其他相关文章链接 ##

1.[vue尚品汇商城项目-day05【30.登录与注册静态组件（处理公共图片资源问题）+31.注册的业务+登录业务】][vue_-day05_30._31.]  
2.[vue尚品汇商城项目-day05【33.token令牌理解+34.用户登录携带token获取用户信息+35.退出登录】][vue_-day05_33.token_34._token_35.]  
3.[vue尚品汇商城项目-day05【36.导航守卫理解】][vue_-day05_36.]

[201cb7e59bb94276b20be0c55371360b.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/12d754f444f5478cb838c53b9e2b5540.png
[e616dbc2c6664416a88dc3c0e3929702.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/e2d1d4ff5e12462b81a41beec63a43a3.png
[0430658eaea5476dbacbd31d71ea7246.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/5d36511e3b1b46b5a3b73eadcb67f0fe.png
[d3fe79a73ca74b03b0f96b436d16c6dd.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/6e84456c0c8d4ae1a2d00d029dc1c3f0.png
[d233ae12f8c54914835909ee1f576ed4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/c0393ec1a6b94bd69d0489aa3fc0cf41.png
[5f6d7510dde84f80948af1e1727a9189.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/0a131fe6c80649659128d362a1cedd2e.png
[bafe05a622044df4b3fea647d731447a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/274d2ecbb1324538afc9eb1a5f757cee.png
[vue_-day05_30._31.]: https://blog.csdn.net/a924382407/article/details/129907629
[vue_-day05_33.token_34._token_35.]: https://blog.csdn.net/a924382407/article/details/129907659
[vue_-day05_36.]: https://blog.csdn.net/a924382407/article/details/129907725