|
在最近的demo中需要实现一个功能：用户登录后不显示登录注册按钮并将用户名和头像显示在页面上，用户注销后就清除信息。 首先我们需要了解vuex的工作流程：（由于无法上传图片，所以使用文字进行描述，如果还不太懂的小伙伴可以去看一下vuex的图解） 1.vue组件->dispatch派发->action 2.action->commit提交->mutation 3.mutation->change修改->state 4.state->render渲染->vue组件
好啦，现在已经基本了解了vuex的工作流程，那我们上代码吧。 <ul class="nav">
<li v-if="!backsta"><router-link to="/login" :underline="false">登录</router-link><el-divider direction="vertical"></el-divider></li>
<li v-if="!loginout"><router-link to="/Reg" :underline="false">注册</router-link><el-divider direction="vertical"></el-divider></li>
<li>
<el-popover
placement="top-start"
title="demo"
width="200"
trigger="hover"
content="移动端">
<el-button slot="reference" class="app"><router-link to="/login">APP</router-link> </el-button>
</el-popover>
</li>
<li><el-divider direction="vertical"></el-divider><span @click="report">举报</span></li>
<li v-if="backsta"><el-divider direction="vertical"></el-divider><router-link to="/BackStageHome" :underline="false">后台</router-link></li>
<li v-if="loginout"><el-divider direction="vertical"></el-divider><router-link to="/loginout" :underline="false">注销</router-link></li>
</ul>
由于图片传不上，那就手动展示一下吧；这里的效果如下:用户未登录就只显示登录、注册和APP，当用户登录之后显示用户名称、头像、APP、管理、注销 登录 | 注册 | APP | 管理 | 注销我们先看看取出这些信息的代码 data(){
return {
backsta:false,
loginout:false,
username:"",
userhead:"",
}
},
created() {
if(sessionStorage.getItem("isLogin")>0){
this.backsta=true
this.loginout=true
this.username=store.getters.getInfo;
this.userhead=store.getters.getInfot;
if(store.getters.getInfot==null){
this.imgsrc=this.imgsrc
}else {
this.imgsrc="http://192.168.1.73:8081/"+this.userhead;
}
}else{
this.unlogin=false
}
这里是通过取出sessionstorage里的是否登录就可以判断用户是否登录，并在确定用户登录后进行用户信息的取出，在这里我对用户头像进行了默认处理，如果没有头像则显示默认头像，有头像就显示对应服务器上的头像。 那么也就是说，我们需要在登录成功时将值传入才能实现这种效果，下面给大家展示一下当我请求成功后进行的处理 this.$axios.post(this.publicInfoController.login,{username:this.ruleForm.username,password:this.ruleForm.pwd,phone:this.ruleForm.phone,phoneCode:this.ruleForm.codemsg}).then((data)=>{
console.log(data)
if (data.status==200){
// this.$message(data.statusText);
console.log(data.headers.authorization)
console.log(data.data)
this.$store.dispatch('setToken',data.headers.authorization);//设置token
this.$store.dispatch('isLogin',"1");//登录
this.$store.dispatch('username',data.data[0].username);//用户名
this.$store.dispatch('userhead',data.data[0].img);//用户头像
this.$router.push('/indexHome');
console.log(data)//打印接受数据
console.log(this.state.token)
}else{
this.$message(data.statusText);
}
}).catch(err=>{
// console.log(err)
})
this.$store.dispatch('isLogin','1');//islogin this.$store.dispatch('setToken',data.headers.authorization)；//token this.$store.dispatch('username',data.data[0].username);//用户名 this.$store.dispatch('userhead',data.data[0].img);//用户头像 这几句话是为了将其派发到actions中对数据进行处理。actions中的代码 isLogin({commit},temp){
commit('SetisLogin',temp); //与mutations里的名称对应
},
setToken({commit},token){
commit('SetToken',token); //与mutations里的名称对应
},
username({commit},username){
commit('username',username); //与mutations里的名称对应
},
userhead({commit},userhead){
commit('userhead',userhead); //与mutations里的名称对应
},再由actions提交到mutations中
mutations中的代码 SetisLogin(state,temp){ //设置islogin
state.isLogin = temp;
window.sessionStorage.setItem("isLogin",temp);
},
SetToken(state,token){ //设置token
state.token = token;
window.sessionStorage.setItem("token",token);
},
username(state,username){ //设置username
state.username = username;
window.sessionStorage.setItem("username",username);
},
userhead(state,userhead){ //设置userhead
state.userhead = userhead;
window.sessionStorage.setItem("userhead",userhead);
},在state中实现sessionsorage和vuex同步更新
isLogin:window.sessionStorage.getItem("isLogin")?window.sessionStorage.getItem("isLogin"):"",
token:window.sessionStorage.getItem("token")?window.sessionStorage.getItem("token"):"",
username:window.sessionStorage.getItem("username")?window.sessionStorage.getItem("username"):"",
userhead:window.sessionStorage.getItem("userhead")?window.sessionStorage.getItem("userhead"):"",在getters文件中设置提取函数
getToken(state){
if(state.isLogin){
return state.token;
}else{
return "";
}
},
getInfo(state){
if(state.isLogin){
return state.username;
}else{
return "";
}
},
getInfot(state){
if(state.isLogin){
return state.userhead;
}else{
return "";
}
}
那么大家可能会问了，我们发送数据不是要发送token吗，应该怎么处理呢？而且注销功能还没实现，先别急。干货马上就来，先看看下面的代码。 // 拦截Axios发起的所有请求，给请求添加token
Axios.interceptors.request.use(
config => {
// Vue.$store.dispatch('loadingStart'); // 显示loading组件
if (store.getters.getToken) { // 判断是否存在token，如果存在的话，则每个http header都加上token
config.headers['Authorization'] = store.getters.getToken;
console.log(store.getters.getToken)
}else{
config.headers['Authorization'] = '';
}
return config;
},
err => {
return Promise.reject(err);
});
//响应每次请求并重置token
Axios.interceptors.response.use((config)=>{
// Vue.$store.dispatch('loadingEnd');
if(config.data.token){
Vue.$store.dispatch('setToken',config.data.token);
}
return config
})
router.beforeEach((to,from,next)=>{
if(to.path=='/loginout'){
sessionStorage.clear();
return next({
path:'/login'
})
}else if(to.path=='/BackStageHome'){
let isLogin = sessionStorage.getItem('token');
if (!isLogin) {
next('/login')
}
next();
}else {
next();
}
})这里的代码是写在main.js中，主要目的是拦截我们的请求为每个请求加上token，然后在每次响应后又再次重置token实现token的更新；并设置路由守卫判断路由，根据某些页面或模块的性质可以设置为未登录就无法进入保障安全性，也还可以有很多其他的操作；例如，我在这里有一个路由判断为loginout,这里就是之前注销按钮所对应的路由，当用户触发这个按钮的时候就会执行sessionstorage.clear();清除掉session中所存放的信息并跳转到登录页面，至此我们的功能已经基本实现了。
通过上面的这些设置，我们就可以实现最开始我们的需求了，是不是特别简单。这只是自己的demo中的典型例子，如有不对欢迎指出。 |
|
公众号
