vue展示信息卡片_vue实现登录和个人信息组件展示
最近在寫一個(gè)重構(gòu)node社區(qū)的小項(xiàng)目，碰到了登錄的問題，實(shí)現(xiàn)思路如下：
1.獲取用戶表單信息，使用axios提交，提交成功后，把數(shù)據(jù)存在cookie,以便后續(xù)操作。
2.其中有個(gè)人信息的頁面展示，獲取cookie信息，判斷用戶是否登錄，如果登錄則顯示內(nèi)容，未登錄則跳轉(zhuǎn)到登錄頁面，所以個(gè)人信息的頁面可以使用路由守衛(wèi)
搜索資料時(shí)有看到這種寫法，就是經(jīng)過判斷后去改變的動(dòng)態(tài)路由來決定跳轉(zhuǎn)到哪個(gè)組件，感覺稍顯麻煩。
3.退出操作，清除cookie
可以把操作cookie的代碼放到一個(gè)單獨(dú)的src/utils/cookie.js文件，utils這個(gè)文件夾可以放一些工具類的文件
cookie.js
//獲取cookie
export function getCookie(name){
var cookieName = encodeURIComponent(name) + "=",
cookieStart = document.cookie.indexOf(cookieName),
cookieValue = null;
if (cookieStart > -1){
var cookieEnd = document.cookie.indexOf(";", cookieStart);
if (cookieEnd == -1){
cookieEnd = document.cookie.length;
}
cookieValue = decodeURIComponent(document.cookie.substring(cookieStart
+ cookieName.length, cookieEnd));
}
return cookieValue;
}
//設(shè)置cookie
export function setCookie(name, value, expires, path, domain, secure) {
var cookieText = encodeURIComponent(name) + "=" +
encodeURIComponent(value);
if (expires instanceof Date) {
cookieText += "; expires=" + expires.toGMTString();
}
if (path) {
cookieText += "; path=" + path;
}
if (domain) {
cookieText += "; domain=" + domain;
}
if (secure) {
cookieText += "; secure";
}
document.cookie = cookieText;
}
//刪除cookie
export function delCookie(name, path, domain, secure){
setCookie(name, "", new Date(0), path, domain, secure);
}
后面發(fā)現(xiàn)vue有一個(gè)關(guān)于操作cookie的插件js-cookie,安裝一下就可以使用了
例如
import Cookie from 'js-cookie'
const TokenKey='Admin-Token'
export function getToken(){
return Cookie.get(TokenKey)
}
export function setToken(token){
return Cookie.set(TokenKey,token)
}
export function removeToken(){
return Cookie.remove(TokenKey)
}
登錄組件的login方法
methods:{
login(){
axios.post('api/v1/accesstoken',{
accesstoken:this.info
})
.then(
res=>{
const info=this.info;
setCookie('accesstoken',this.info)
setCookie('username',res.data.loginname)
setCookie('userid',res.data.id)
this.$router.push( {name:'myinfo',params:{user:res.data.loginname} } )
}
)
.catch(
err=>{
alert(err)
}
)
}
}
個(gè)人信息組件顯示與否的判斷
beforeRouteEnter(to,from,next){
if(to.meta.requireAuth){ //此組件需要登錄
if(getCookie('accesstoken')==null){
next({
path:'/login'
})
}else{
next()
}
}else {
next(); //否則不需要登錄，直接進(jìn)入路由
}
},
退出操作
//退出登錄
logout(){
delCookie('userid') //名字要對應(yīng)getCookie的值
delCookie('accesstoken')
delCookie('username')
this.$router.push({
path: "/login"
})
}
其他操作
例如點(diǎn)贊和評論等功能，也要判斷用戶是否登錄
總結(jié)
以上是生活随笔為你收集整理的vue展示信息卡片_vue实现登录和个人信息组件展示的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ehshig蒙文歌曲_ehshig蒙古音
- 下一篇： html5倒计时秒杀怎么做,vue 设