zoukankan      html  css  js  c++  java
  • uni-app 路由守卫,token 验证

          uni app 中判断是否登录过,总不能在每个页面去公用一个方法,判断 token 再跳转到对应的页面。页面少还可以这样凑合写写,但是写在组件生命周期里,还要判断完成之后,再请求数据,实则是没有太大的必要,而且项目复用性不是太好。我查了网上的一些资料,研究了一下,发现  uni-simple-router 这个库还是不错的。 路由拦截和 vue-router 差不多。

        在 pages.json 中的 pages 增加页面的一个属性,把登录页面的 name 也配上吧,万一修改了登录页面的路径,不配置也没关系。

    "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
    		 {
    			"path": "pages/login/login",
    			"name": "login",
    			"style": {
    				"navigationBarTitleText": "登录",
    				"enablePullDownRefresh": false
    			}
    
    		}, {
    			"path": "pages/goods/good-item",
    			"token": true,
    			"style": {
    				"navigationBarTitleText": "商品详情",
    				"enablePullDownRefresh": false
    			}
    
    		}, {
    			"path": "pages/order/order",
    			"token": true,
    			"style": {
    				"navigationBarTitleText": "我的订单",
    				"enablePullDownRefresh": false
    			}
    
    		},
    		{
    			"path": "pages/index/index",
    			"style": {
    				"navigationBarTitleText": "首页"
    			}
    		},
    		{
    			"path": "pages/center/index",
    			"style": {
    				"navigationBarTitleText": "个人中心"
    			}
    		},
    		{
    			"path": "pages/goods/goods",
    			"style": {
    				"navigationBarTitleText": "商品",
    				"enablePullDownRefresh": false
    			}
    		}
    	]

     uni-simple-route 的安装的相关配置官网上都有,https://hhyang.cn/src/router/start/quickstart.html。

    上一篇有说到如何获所有 tabbar 的数据,同样的,也可以拿到所的 page,思路就是在 beforeEach 里判断当前的页面路径是否要有 token ,并且当前是否有 token。getLoginPath 也可以填写自己的 login 页面对应的路径。然后,把当前的页面路径和参数都存起来,以便登录成功之后可以回跳回来。

    //全局路由前置守卫
    router.beforeEach((to, from, next) => {
    	const tokenRoutes = routes.pages.find(function(v) {
    		return v.token && `/${v.path}` === to.path
    	})
    	const {vuex_token}= uni.getStorageSync('lifeData')
    
    	if (tokenRoutes && !vuex_token) {
           uni.setStorageSync('router', JSON.stringify({
    			route: to.path,
    			options: to.query
    		}))
    		next(getLoginPath())
    	} else {
    		next()
    	}
    });
  • 相关阅读:
    Java服务停止与开启
    跨域,php后端处理
    Mac 504 gateway timeout nginx
    Tp3.2 多数据库链接
    Redis 设置密码
    Redis 如何对外访问 lnmp安装
    tensorflow gpu安装
    ngx_http_upstream_check_module
    Nginx负载均衡+监控状态检测
    springboot+log4j2+slf4j控制台打印带sql日志
  • 原文地址:https://www.cnblogs.com/ruose/p/15325373.html
Copyright © 2011-2022 走看看