vue中的token存储和使用

token存储

通过ajax请求路由地址，并保存到store里面，通过getters进行存储token，并存储在浏览器中，步骤和写法是固定的

 

前端使用token实现路由守卫

其实在后端代码中写的unless就是路由守卫的意思，不过前端应该也要有这个，不然不用登录就可以访问到网站的内容了，这显然不合理

看看前端怎么写的，写在router.js中

router.beforeEach((to,from,next)=>{
    if(to.path == '/login' || to.path== '/register'|| to.path == '/forget'){
        next();
    }else{
        // let stores = store;
        let token = JSON.parse(localStorage.store).token;
        // console.log(store);
        // console.log(JSON.parse(localStorage.store).token);
        
        

        if(token == null || token == ''){
            
            next('/login');
        }else{
            next();
        }
    }
})

 

看路由守卫后面的代码就可以了

使用的是router中的beforeEach函数

使用的逻辑如下：

定义一个token，获取localstorage里面的token值
确定哪些路由不需要拦截：to.path == '/login' || to.path == '/register || to.path=='/forget''也就是登录和注册不需要拦截，直接放行，用next()
对于拦截的路由，判断token是否为null,或者是空，是就说明没有登录，就不放行，有token，直接放行，