unicloud云开发进阶46-项目30 uniIdRouter路由配置限制用户登录后的操作

点击头像跳转到修改昵称头像页面

在pajes.json中有这个页面，输入url可以访问，但是有权限限制

http://localhost:8080/#/uni_modules/uni-id-pages/pages/userinfo/userinfo

之前值直接写死成登陆的，现在通过hasLogin判断

<view class="text" v-if="hasLogin">
    <view class="nickname">{{userInfo.nickname||userInfo.username||userInfo.mobile}}</view>
    <view class="year">
        <uni-dateformat :date="new Date() - 360000" :threshold="[3600,99*365*24*60*60*1000]"></uni-dateformat>注册</view>
</view>

点击头像和文字区域，跳转到上面的个人资料中心页面

头像、文字和右边的箭头整体都是包含在group中的，所以给它加点击事件

      // 跳转到编辑个人资料页面
      toUserInfo(){
        uni.navigateTo({
          url:"/uni_modules/uni-id-pages/pages/userinfo/userinfo"
        })
      },

现在因为还没有登陆，所以跳转到用户资料页面也还是会报缺少参数tocken的

uniId自动路由 白名单

文档在： uniapp $\rightarrow$ 全局文件 $\rightarrow$ pages.json页面路由 $\rightarrow$ uniIdRouter

uniapp.dcloud.net.cn/uniCloud/un…

uniId自动路由： uniIdRouter 是一个运行在前端的、对前端页面访问权限路由进行控制的方案。

大多数应用，都会指定某些页面需要登录才能访问。以往开发者需要写不少代码。

现在，只需在项目的pages.json内配置登录页路径、需要登录才能访问的页面等信息，uni-app框架的路由跳转，会自动在需要登录且客户端登录状态过期或未登录时跳转到登录页面。

uniapp.dcloud.net.cn/collocation…

官方示例写法：

第一项是登录页面，第二项是对哪些页面配置，在这里进行了配置的页面就需要登录才能进行操作

例如之前的编辑页面是可以直接进入的，但是配置完成后，点击编辑页面就会直接跳转到登录页面 第三条是自动更新tocken

"uniIdRouter": {
    "loginPage": "pages/index/index", // 登录页面路径
    "needLogin": [
        "pages/detail/.*" // 需要登录才可访问的页面列表，可以使用正则语法
		],
    "resToLogin": true // 自动解析云对象及clientDB的错误码，如果是客户端token不正确或token过期则自动跳转配置的登录页面，配置为false则关闭此行为，默认true
}

配置好之后，跳回到登录页面的url后面的参数就是跳转回啦die页面的url

http://localhost:8080/#/uni_modules/uni-id-pages/pages/login/login-withpwd?uniIdRedirectUrl=%252Fpages%252Fedit%252Fedit

登陆后再进入个人资料页面，点击添加头像，还能进行裁剪

现在点到个人中心页面就应该能显示头像了，只是自己的项目报跨域

设置头像区域的背景色 没有设置头像的应该是默认的蓝色图标

设置背景图

存在头像就用头像进行模糊，不存在用默认图进行模糊

<!-- 背景图 -->
<view class="bg">
    <!-- 已登录头像 -->
    <image v-if="hasLogin&&userInfo.avatar_file&&userInfo.avatar_file.url" :src="userInfo.avatar_file.url" mode="aspectFill"></image>
    <!-- 未登录头像 -->
    <image v-else src="../../static/images/user-default.jpg" mode="aspectFill"></image>
</view>