关于Cookie的

[yangkaiyangyi]

vue中设置、获取、删除cookie 引用

补充setCookie():

export function setCookie(c_name,value,exdays) {
    var exdate=new Date()
    exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
    document.cookie="username" + "="+escape(c_name)+"; expires="+ exdate.toGMTString();
    document.cookie="password"+ "="+escape(value)+"; expires="+ exdate.toGMTString();
    //console.log(document.cookie)
}

1、在src目录下的access下新建一个cookie.js,

       内容如下：

 

export function setCookie(c_name,value,expire) {
    var date=new Date()
    date.setSeconds(date.getSeconds()+expire)
    document.cookie=c_name+ "="+escape(value)+"; expires="+date.toGMTString()
    //console.log(document.cookie)
}
 
export function getCookie(c_name){
    if (document.cookie.length>0){
        let c_start=document.cookie.indexOf(c_name + "=")
        if (c_start!=-1){ 
            c_start=c_start + c_name.length+1 
            let c_end=document.cookie.indexOf(";",c_start)
            if (c_end==-1) c_end=document.cookie.length
                return unescape(document.cookie.substring(c_start,c_end))
            } 
        }
    return ""
}
 
export function delCookie(c_name){
    setCookie(c_name, "", -1)
}

2、在main.js中引入并且将cookie设置成vue的全局变量

 

3、这样，在登录或退出等页面上就可以调用$cookieStore这个全局变量来使用

//  将用户名存进cookie，第三个参数60为秒，意味着一分钟后cookie自动消失。一天为 86400 s
  this.$cookieStore.setCookie( 'username' ,this.username,60);
 

[yangkaiyangyi]

利用cookie结合vue中的导航守卫判断用户的登录状态

在src/router/index.js中

1、引入cookie文件，关于如何引入cookie大家可以参考一下我的另一片文章，然后将给路由起个名字叫router

2、添加一下需要检测状态的几个路由页面，比如首页

别忘了上面也要引入一下

import Home from '@/pages/Home/home'
import OtherPages from '@/pages/otherPages/otherPages'

3、使用导航守卫

router.beforeEach((to, from, next) => {
    //所有需要检测登录状态的路由页面都放在这个数组里面
     const nextRoute = [ 'home', 'otherPages'];
       var isLogin = false
      if(getCookie('username')&&getCookie('password')){
            isLogin = true;
             console.log('isLogin:'+isLogin);
        }
    
    //nextRoute.indexOf(to.path.split('/')[1]) >= 0表示导航栏能够获取到数据，表示进入到了该页面中
    if (nextRoute.indexOf(to.path.split('/')[1]) >= 0) {
        //检测是不是未登录状态，如果登录了就不做处理（页面跳转到上面数组的哪就是哪），未登录就去登录页
        if (!isLogin) {
                      next({
                          path: '/login'
                      })
//             alert('未登录，先登录')
                     location.reload();
                   
        }
    }
    
 
    //已登录的情况再去登录页，直接跳转至首页
   
    if (to.path.split('/')[to.path.split('/').length-1] === 'login') {
      
        if (isLogin) {
//       alert('你已登录，直接进入首页')
                 router.push({path:'/home'})
                 location.reload();
        }
    }
    next();
});
export default router;

 

[yangkaiyangyi]

关于//关于token，前端发送请求到后端，后端提供token，前端接收存入浏览器中如sessionstorage，cookie；；路由守卫根据是有否浏览器本地是否存在token信息，来判断是否登陆？？？

关于密码保存，7天登陆；；思路是:判断，如果✔选保存，则存入cookie；如果不✔保存，则清空cookie,,,在保存✔的状态下，下次登陆，直接在一开始（mounted）从cookie中获取值，放入表单，加个自动登陆，和cookie时间期限

[yangkaiyangyi]

如何在vue项目中使用md5加密

npm安装：

npm install --save js-md5

1.在需要使用的项目文件中引入：

import md5 from 'js-md5';

使用：

?

md5('hello world')  // 5eb63bbbe01eeed093cb22bb8f5acdc3

2.或者在main.js文件中将md5转换成vue原型：

?

1 2	import md5 from 'js-md5'; Vue.prototype.$md5 = md5;

使用：

?

1	this.$md5('hello world')  // 5eb63bbbe01eeed093cb22bb8f5acdc3