token存储

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

前端使用token实现路由守卫

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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，直接放行，

文章作者: Mr. Fortunate
文章链接: https://www.fortunate.cool/2023/02/04/vue%E4%B8%AD%E7%9A%84token%E5%AD%98%E5%82%A8%E5%92%8C%E4%BD%BF%E7%94%A8/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 fortunate！
项目 javascript 前端 开发语言
评论