vue填写个人信息(vueuseragent)
发布网友
发布时间：2024-09-30 18:01
共1个回答
热心网友
时间：2024-10-04 05:38
问题：最近做的一个后台系统，登录页填写信息之后跳转，右上角显示的个人信息的姓名，用的$router.push的params将登录的信息传递到跳转之后的页面，但是刷新之后的$route.params值为null
解决办法：将登录信息存入localStorage
created(){
?if(localStorage.getItem('login')=='null'){
???this.infoForm=this.$route.params
???localStorage.setItem('login',JSON.stringify(this.$route.params))
??}else{
???this.infoForm=JSON.parse(localStorage.getItem('login'))
??}
?},
怎么通过vue网站参加cisco考试
网页版考试注册流程
1、打开网站：
2、点击考生登陆
3、点击页面标注：AtoZlistofallprograms，选择ciscosystems，然后点击后面的createaccount，填写个人信息注册VUE考试账号即可；
4、注册完后根据自己的时间直接预约即可，不过有的要1个工作日后收到系统发的考试账号和初次密码后才能预约；
5、如以前有参加过考试或已有账号的，则直接登录网址预约考试即可；
vue实现登陆注册功能（小白篇）在前后端完全分离的情况下，Vue项目中实现token验证大致思路如下：
1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码
2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token
3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面
4、前端每次跳转路由，就判断localStroage中有无token，没有就跳转到登录页面，有则跳转到对应路由页面
5、每次调后端接口，都要在请求头中加token
6、后端判断请求头中有无token，有token，就拿到token并验证token，验证成功就返回数据，验证失败（例如：token过期）就返回401，请求头中没有token也返回401
7、如果前端拿到状态码为401，就清除token信息并跳转到登录页面
vue-cli搭建一个项目，简单说明前端要做的事：
一、调登录接口成功，在回调函数中将token存储到localStorage和vuex中
login.vue
template
??div
????input?type="text"?v-model="loginForm.username"?placeholder="用户名"/
????input?type="text"?v-model="loginForm.password"?placeholder="密码"/
????button?@click="login"登录/button
??/div
/template
script
import?{?mapMutations?}?from?'vuex';
export?default?{
??data?()?{
????return?{
??????loginForm:?{
????????username:?'',
????????password:?''
??????}
????};
??},
??methods:?{
????...mapMutations(['changeLogin']),
????login?()?{
??????let?_this?=?this;
??????if?(this.loginForm.username?===?''?||?this.loginForm.password?===?'')?{
????????alert('账号或密码不能为空');
??????}?else?{
????????this.axios({
??????????method:?'post',
??????????url:?'/user/login',
??????????data:?_this.loginForm
????????}).then(res?=?{
??????????console.log(res.data);
??????????_this.userToken?=?'Bearer?'?+?res.data.data.body.token;
??????????//?将用户token保存到vuex中
??????????_this.changeLogin({?Authorization:?_this.userToken?});
??????????_this.$router.push('/home');
??????????alert('登陆成功');
????????}).catch(error?=?{
??????????alert('账号或密码错误');
??????????console.log(error);
????????});
??????}
????}
??}
}
/script
store文件夹下的index.js
importVuefrom'vue';
importVuexfrom'vuex';
Vue.use(Vuex);
conststore=newVuex.Store({
?state:{
??//存储token
??Authorization:localStorage.getItem('Authorization')?localStorage.getItem('Authorization'):''
?},
?mutations:{
??//修改token，并将token存入localStorage
??changeLogin(state,user){
???state.Authorization=user.Authorization;
???localStorage.setItem('Authorization',user.Authorization);
??}
?}
});
exportdefaultstore;
二、路由导航守卫
?router文件夹下的index.js
importVuefrom'vue';
importRouterfrom'vue-router';
importloginfrom'@/components/login';
importhomefrom'@/components/home';
Vue.use(Router);
constrouter=newRouter({
?routes:[
??{
???path:'/',
???redirect:'/login'
??},
??{
???path:'/login',
???name:'login',
???component:login
??},
??{
???path:'/home',
???name:'home',
???component:home
??}
?]
});
//导航守卫
//使用router.beforeEach注册一个全局前置守卫，判断用户是否登陆
router.beforeEach((to,from,next)={
?if(to.path==='/login'){
??next();
?}else{
??lettoken=localStorage.getItem('Authorization');
??if(token==='null'||token===''){
???next('/login');
??}else{
???next();
??}
?}
});
exportdefaultrouter;
三、请求头加token
//添加请求*，在请求头中加token
axios.interceptors.request.use(
?config={
??if(localStorage.getItem('Authorization')){
???config.headers.Authorization=localStorage.getItem('Authorization');
??}
??returnconfig;
?},
?error={
??returnPromise.reject(error);
?});
四、如果前端拿到状态码为401，就清除token信息并跳转到登录页面
????????localStorage.removeItem('Authorization');
????this.$router.push('/login');
