vue通过cookie获取用户登录信息的思路详解
思路
- 进入页面
- 若未登录，跳转至登陆页面
- 若已登录，从cookie中获取用户信息，并执行后续操作
2. 登录页面，存入cookie（setCookie）
import {setCookie,getCookie}from 'src/js/cookieUtil'
methods: {
async cheack_n_p () {
if( this.checkCode === this.pwd) {
this.loginData = await getUserInfo(this.uname, this.pwd, this.adminPhone);
if (this.loginData.res !== 0) {
setCookie('userName',this.uname);
setCookie('userPwd',this.pwd,);
setCookie('phone',this.uname);
setCookie('userId',this.loginData.obj.id);
setCookie('userType',this.loginData.obj.userType);
setCookie('adminPhone',this.adminPhone);
// this.$router.go(-1);
this.$router.replace('/');
} else {
alert("验证码错误！")
}
}
},
//验证手机号码部分
async sendcode(){
var pattern = /^0{0,1}(1[0-9][0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/,
str =this.uname;
if (!pattern.test(str)) {
alert('请正确输入手机号!');
return ;
}
this.time=60;
this.disabled=true;
this.timer();
this.checkCode = (await getUserPhoneCode(this.uname)).resMsg;
// this.checkCode = '123456';
console.log( this.checkCode)
},
timer:function () {
if (this.time > 0) {
this.time--;
// console.log(this.time);
this.btntxt=this.time+"s后重新获取";
setTimeout(this.timer, 1000);
} else{
this.time=0;
this.btntxt="获取验证码";
this.disabled=false;
}
}
},
2. 页面判断
import {setCookie,getCookie}from 'src/js/cookieUtil'
mounted () {
if (this.isLogin==undefined||this.isLogin=="") {
this.$router.replace('/login');
} else {
// 执行后续操作
this.phone = getCookie("phone");
}
},
computed: {
isLogin () {
// return this.$store.getters.getLogin;
this.userId = getCookie("userId");
// console.log(this.userId);
return this.userId;
}
},
3. cookieUtil（setCookie，getCookie）
/**
* Created by Schon on 2018/9/13 0013.
*/
//设置cookie
export function setCookie(key,value) {
var exdate = new Date(); //获取时间
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * 36500); //保存的天数，我这里写的是100年
//字符串拼接cookie
window.document.cookie = key + "=" + value + ";path=/;expires=" + exdate.toGMTString();
};
//读取cookie
export function getCookie(param) {
var c_param = '';
if (document.cookie.length > 0) {
var arr = document.cookie.split('; '); //这里显示的格式需要切割一下自己可输出看下
for (var i = 0; i < arr.length; i++) {
var arr2 = arr[i].split('='); //再次切割
//判断查找相对应的值
if (arr2[0] == param) {
c_param = arr2[1];
//保存到保存数据的地方
}
}
return c_param;
}
};
function padLeftZero (str) {
return ('00' + str).substr(str.length);
};
总结
以上所述是小编给大家介绍的vue通过cookie获取用户登录信息的思路详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
Vue项目使用localStorage+Vuex保存用户登录信息
本文实例为大家分享了Vue使用localStorage+Vuex保存用户登录信息的具体代码,供大家参考,具体内容如下 api.js import axios from 'axios' const baseURL = 'http://XXX // 全局的 axios 默认值 axios.defaults.baseURL = baseURL // 登录请求 const loginCheck = params => { return axios.post('/login', params).then(
-
vue实现将数据存入vuex中以及从vuex中取出数据
1.在store文件下面新建文件 print.js ,写入以下代码 /** * 存放 ** 数据 * **/ // initial state const state = { all: { ID:'', BrandID:'' } } // getters const getters = {} // actions const actions = {} // mutations const mutations = { setPrint(state, all) { //设置参数 state.all
-
使用vuex存储用户信息到localStorage的实例
1.首先需要装vuex npm install vuex -d 2.新建store文件夹,新建index.js, 并引入vue.vuex,代码如下: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const key = 'user' const store = new Vuex.Store({ state () { return { user: null } }, getters: { getStorage: functi
-
VUE:vuex 用户登录信息的数据写入与获取方式
整体思路: 前台获取用户数据,向后台发送post请求,验证成功后 前台接受数据,改变用户登录状态 将登录状态及用户数据写入到state中 这样多个页面就可以直接使用this.$store.getters.getuname调用state中的用户信息 1. 向后台发送请求,若成功返回用户名,密码,使用 this.$store.dispatch('setLogin', true);将数据写入到state中 页面:login.vue 代码: this.loginData = await getUserI
-
详解Vuex管理登录状态
又仔细看了一遍vuex的文档,还是云里雾里的,不过至少明白它是一个专门管理状态的,根据数据状态的改变可以驱动视图更新,既然是这样那至少登录注册是一种状态,就用登录来做测试,学习vuex,不过话说回来,既然专门管理状态,那我至少要仔细推敲一下这个learn的学习项目有那些状态逻辑. 1.据说储存的vuex store里面的状态是临时的,右键刷新一下页面这些状态就销毁了(这是据说,请大神解惑我也没办法证实),如果是这样的话,我的用户状态user还是应该要写入sessionStorage,不然登录了的
-
vue通过cookie获取用户登录信息的思路详解
思路 进入页面 若未登录,跳转至登陆页面 若已登录,从cookie中获取用户信息,并执行后续操作 2. 登录页面,存入cookie(setCookie) import {setCookie,getCookie}from 'src/js/cookieUtil' methods: { async cheack_n_p () { if( this.checkCode === this.pwd) { this.loginData = await getUserInfo(this.uname, this.
-
python使用selenium打开chrome浏览器时带用户登录信息实现过程详解
导读 我们在使用selenium打开google浏览器的时候,默认打开的是一个新的浏览器窗口,而且里面不带有任何的浏览器缓存信息.当我们想要爬取某个网站信息或者做某些操作的时候就需要自己再去模拟登陆 selenium操作浏览器 这里我们就以CSDN为例,来展示如何让selenium在打开chrome浏览器的时候带上用户的登录信息 打开chrome浏览器 from selenium import webdriver from selenium.webdriver import ChromeOpti
-
Django利用cookie保存用户登录信息的简单实现方法
本文实例讲述了Django利用cookie保存用户登录信息的方法.分享给大家供大家参考,具体如下: 设置cookie response对象.set_cookie('key','value',多少秒后过期) 获取cookie request对象.COOKIES.get('key') 我们继续前一篇的代码 def hi(request): msg = {'result':''} loginSuccess = False # 是否登录成功标识 if user.userLogin(request.POS
-
JS使用cookie保存用户登录信息操作示例
本文实例讲述了JS使用cookie保存用户登录信息.分享给大家供大家参考,具体如下: 通常cookie和session,是web开发中用于存储信息的对象,session存在于服务器的内存中,而cookie则是存在客户端,所以js可以直接操作cookie进行信息的存储和读取. js存放cookie一般的写法,如:document.cookie="userName=admin";,如果是多个键值对:document.cookie="userName=admin; userPass
-
Vue微信项目按需授权登录策略实践思路详解
项目采用Vue作为开发框架,用户浏览页面时有两种情况: 一种是需要用户先登录之后才能继续浏览: 另一种是用户无需登录即可随意浏览. 在无需用户登录的页面中,可能包含需要用户信息的操作,此时就需要用户登录之后方能进行后续操作.因此,需要对授权登录策略进行区分. 思路 1.一般而言,我们为微信开发的H5页面,进入页面的时候就进行鉴权,要求用户登录之后才能继续浏览.但由于产品需求,这个项目我们需要对不同页面的鉴权策略进行划分,按照一般与特殊进行设计: 2.一般情况,用户进入页面第一时间要求用户授权登录
-
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
微信小程序注册登录思路 (这是根据自身的项目的思路,不一定每个项目都适用) 1.制作授权登录框,引导用户点击按钮 2.uni.login获取code 3.把code传给后端接口,后端返回如下数据 openid: "ogtVM5RWdfadfasdfadfadV5s" status: 1 // 状态码:status==0(该用户未注册,需调用注册接口) status==1(该用户已注册) 4.判断用户是否注册,并调用用户信息接口 (1)若已注册则提示登录成功,并调用后台给的获取用户信息的
-
Asp.net mvc验证用户登录之Forms实现详解
这里我们采用asp.net mvc 自带的AuthorizeAttribute过滤器验证用户的身份,也可以使用自定义过滤器,步骤都是一样. 第一步:创建asp.net mvc项目, 在项目的App_Start文件夹下面有一个FilterConfig.cs,在这个文件中可以注册全局的过滤器.我们在文件中添加AuthorizeAttribute过滤器如下: public class FilterConfig { public static void RegisterGlobalFilters(Glo
-
vue实现短信验证码登录功能（流程详解）
无论是移动端还是pc端登录或者注册界面都会见到手机验证码登录这个功能,输入手机号,得到验证码,最后先服务器发送请求,保存登录的信息,一个必不可少的功能 思路 1,先判断手机号和验证是否为空, 2,点击发送验证码,得到验证码 3,输入的验证码是否为空和是否正确, 4,最后向服务发送请求 界面展示 1.准备工作 这个会对input进行封装处理 <template> <div class="text_group"> <div class="input_
-
react使用mobx封装管理用户登录的store示例详解
1.MobX 介绍 MobX 是一个简单.可伸缩的响应式状态管理库.通过 MobX 你可以用最直观的方式修改状态,其他的一切 MobX 都会为你处理好(如自动更新UI),并且具有非常高的性能.当状态改变时,所有应用到状态的地方都会自动更新. 1.1 React和Mobx关系 React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染.而MobX提供机制来存储和更新应用状态供 React 使用. 1.2 核心概念 State:驱动应用的数据 Computed values:计算值.如果你想
-
基于Vue自定义指令实现按钮级权限控制思路详解
思路: 登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到token之后(我会将这个token存贮到sessionStorage中,保证刷新页面后能记住用户登录状态),前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息(如用户权限,用户名等等信息). 权限验证:通过token获取用户对应的 role,自定义指令,获取路由meta属性里btnPermissions( 注: meta.btnPermissions是存放按钮