ユニアプリネイティブの方法を使用して、ログイン認証とルートインターセプトを実現します
main.jsに次のコードを追加します
//任何组件在跳转xx页面时调用此方法，判断token，false就跳转到login页面，并携带xx页面路径。
//登录成功后重新跳转回xx页面
Vue.prototype.$href=function(data,type=1){
if(uni.getStorageSync("token")){
if(type==1){
uni.navigateTo({
url:data
})
}
if(type==2){
uni.switchTab({
url:data
})
}
}else{
uni.navigateTo({
url:"/pages/login/login?backurl="+data
})
}
}
コンポーネントの使用法
listAddress(){
this.$href("../address/list?back=1")
},
ユニシンプルルータールーティング、インターセプト、最もエレガントなソリューション
uni-simple-routerプラグイン、リダイレクトルーティングとルートインターセプトにuni-appでvue-routerを使用
公式ウェブサイトアドレス：https：//hhyang.cn/v2/start/quickstart.html
ルートインターセプトの詳細：
- vue.config.jsのincludes属性を変更し、「meta」を追加して、page.jsonで新しい属性を取得できるようにします。
//vue.config.js
includes: ['path', 'name', 'aliasPath','meta']
//page.json 需要登录鉴权的页面添加meta属性
{
"path" : "pages/children/address/address",
"name":"address",
"meta":{
"loginAuth":true},
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
- ルートインターセプトされたコードは、移動するパスを伝送し、ログインが完了した後に再びジャンプすることができます
//router.js
//全局路由前置守卫
router.beforeEach((to, from, next) => {
console.log(to)
if(to.meta.loginAuth){
let token=uni.getStorageSync('token')
if(token){
next()
}else{
uni.navigateTo({
url:'/pages/login/login?path='+to.path
})
}
}else{
next();
}
});
//在login组件进行修改
login(){
//跳转页面
if (this.$route.query.path) {
this.$router.push(this.$route.query)
} else {
uni.switchTab({
url: '/pages/admin/admin'
})
}
}