Vue的前端登录,修改已登录用户信息,用户登录信息回显,安全退出
一、登录模块登录同时,将token(Jwt鉴权)、和用户对象存入sessionStorage将对象存入要JSON.stringify转字符串存<scri...
·
一、登录模块
登录同时,将token(Jwt鉴权)、和用户对象存入sessionStorage
将对象存入要JSON.stringify转字符串存
<script>
import { login } from "../api";
export default {
data() {
return {
blogger: {}
};
},
methods: {
async login() {
let { data: baseResult } = await login(this.blogger);
if (baseResult.code == 1) {
sessionStorage.setItem("token", baseResult.other.token);
sessionStorage.setItem("blogger", JSON.stringify(baseResult.other.blogger));
this.$router.push("/welcome");
} else {
this.$message.error(baseResult.message);
}
}
},
//页面标题
mounted() {
document.title = "那一天,你终于想起了自己的... ---柒";
}
};
</script>
api.js
/** ajax axios */
import axios from 'axios'
import { Message } from 'element-ui'
import Mock from 'mockjs'
import router from './router'
/** axios 基本项设置 */
axios.defaults.baseURL = 'http://localhost:9910/api'
axios.defaults.timeout = 3000
axios.interceptors.request.use(request => {
//每一次请求头中,请求头需要携带token
//获得token
let token = sessionStorage.getItem('token')
//有设置就放行
if (token) {
request.headers.authorization = token
}
return request
}, error => { });
axios.interceptors.response.use(response => {
// 放行
return response
}, error => {
// 错误判断
if(error.response.status==403){
router.push('/login')
}
return Promise.reject(error)
})
/** 登录操作 */
export function login(blogger) {
return axios.post('/bloggerservice/blogger/login', blogger)
}
/** 修改个人信息 */
export function editbr(blogger){
return axios.put('/bloggerservice/blogger',blogger)
}
/** 退出 */
export function layout() {
return axios.get('/bloggerservice/blogger')
}
二、修改登录用户信息,已登录用户信息回显
其实就是sessionStorage.getItem
取出来之前登录存的对象,用JSON.parse
转一下定义变量取出来,绑定data里的对象。
<script>
import { editbr } from "../../api";
export default {
data() {
return {
blogger: {}
};
},
methods: {
async edit() {
let { data: baseResult } = await editbr(this.blogger);
sessionStorage.setItem("blogger", JSON.stringify(baseResult.data));
this.$message.success(baseResult.message);
this.$router.push("/index");
}
},
async created() {
let b = sessionStorage.getItem("blogger");
this.blogger = JSON.parse(b);
}
};
</script>
三、退出登录
后台是清session的方法equest.getSession().invalidate(); 这里session里面存的只有用户数据,考虑到以后可能有其他数据,应该用 sessionStorage.removeItem("blogger");
<script>
import { layout } from "../../api";
export default {
data() {
return {
dialogVisible: true
};
},
methods: {
async layout() {
let { data: baseResult } = await layout();
//sessionStorage.clear();
//localStorage.clear();
sessionStorage.removeItem("blogger");
this.$message.success(baseResult.message);
this.$router.push("/login");
}
}
};
</script>
更多推荐
已为社区贡献2条内容
所有评论(0)