如何在Vue中实现登录成功后保存牌

这篇文章将为大家详细讲解有关如何在Vue中实现登录成功后保存牌,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

在Vue中,可以用存储(sessionStorage localStorage) * * * *来存储的令牌,也可以用vuex来存储(但要考虑页面刷新数据消失问题,可以在vuex用存储),

下面介绍用localStorage来存储:

在登录请求成功后,会返回一个令牌值,用loaclStorage保存

localStorage.setItem(& # 39;标记# 39;,res.data.token)

在主要。js中设置全局请求头和响应回来的判断

//设置axios请求头加入令牌 　　Axios.interceptors.request.use (config=比;{ 　　如果(配置。推动===& # 39;/& # 39;){ 　　其他}{ 　　如果(localStorage.getItem(& # 39;标记# 39;)){//在请求头加入令牌,名字要和后端接收请求头的标记名字一样 　　config.headers.token=localStorage.getItem(& # 39;标记# 39;); 　　} 　　} 　　返回配置; 　　}, 　　错误=比;{ 　　返回Promise.reject(错误); 　　});//=============================//响应回来令牌是否过期 　　Axios.interceptors.response.use(响应=比;{ 　　console.log(& # 39;响应回来:& # 39;+ response.data.code)//和后端令牌失效返回码约定403 　　如果(response.data。代码==403){//引用elementui消息提示框 　　ElementUI.Message ({ 　　信息:& # 39;身份已失效& # 39;, 　　类型:& # 39;错# 39; 　　});//清除牌 　　localStorage.removeItem(& # 39;令牌& # 39;);//跳转 　　路由器。推动({name: & # 39;登录# 39;}); 　　其他}{ 　　返回响应 　　} 　　}, 　　错误=比;{ 　　返回Promise.reject(错误); 　　})

在路由器中的指数设置全局守卫来判断是否存在令牌,不存在就返回登录页

路由器。beforeEach(下),从=比;{//到哪儿从从哪儿离下跳开转为空就是放行 　　如果()。路===& # 39;/& # 39;){//如果跳转为登录,就放行 　　next (); 　　其他}{//取出localStorage判断 　　让牌=localStorage.getItem(& # 39;令牌& # 39;); 　　如果令牌==null | |令牌===& # 39;& # 39;){ 　　console.log(& # 39;请先登录& # 39;) 　　下({name: & # 39;登录# 39;}); 　　其他}{ 　　next (); 　　} 　　}});

<强> Vue获取并存储服务器返回的AuthorizationToken信息并给每次请求添加上标记

由于后台是用jwt的令牌进行身份权限验证,后台在登录后把令牌添加响应头里,所以前台需要把这个令牌存放起来,并给每次请求的请求头添加上令牌,服务器才能获取令牌进行身份认证。

前台使用Vue项目:

loging.vue(登录组件)

{ 　　submitForm (formName) { 　　axios美元这个。 　　. post (& # 39;/api/admin/登录# 39;,{ 　　用户名:this.ruleForm.userName, 　　密码:this.ruleForm.password 　　}) 　　不要犹豫(successResponse=比;{ 　　这一点。responseResult=JSON.stringify (successResponse.data) 　　这一点。味精=JSON.stringify (successResponse.data.msg) 　　如果(successResponse.data。代码===200){ 　　this.msg=& # 39; & # 39;; 　　localStorage.setItem(& # 39;用户名# 39;,this.ruleForm.userName);//获取并存储服务器返回的AuthorizationToken信息 　　var授权=successResponse.headers[& # 39;授权# 39;]; 　　localStorage.setItem(& # 39;授权# 39;,授权);//登录成功跳转页面 　　美元。router.push(& # 39;/仪表盘# 39;); 　　 　　} 　　}) 　　.catch (failResponse=比;{}) 　　} 　　}

main.js(全局配置js):

//自动给同一个vue项目的所有请求添加请求头 　　axios.interceptors.request.use(函数(配置){ 　　让牌=localStorage.getItem(& # 39;授权# 39;); 　　如果(令牌){ 　　config.headers[& # 39;授权# 39;]=令牌; 　　} 　　返回配置; 　　})

关于如何在Vue中实现登录成功后保存牌就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。

如何在Vue中实现登录成功后保存牌